Jump to content


Check out our Community Blogs

Lop

Member Since 01 May 2006
Offline Last Active Jan 09 2011 07:45 PM
-----

Topics I've Started

CSS Part 5: Advanced Topics

07 February 2009 - 12:43 PM

CSS Tutorials
Chapter 5: CSS Advanced Topics

In this chapter, we are going to discuss the following topics. Don't get scared by the title "Advanced Topics". These topics are as simple as they sound. Only thing is you would use them only on certain specialized requirements

  • Cursor
  • Position
  • Layer
  • Display
1. Cursor
Gotten tired of the default cursor set that comes with HTML. Here comes the cursors in CSS which lets you customize how the mouse cursor would appear when you point to a particular element. Standard CSS supports upto 17 different properties for cursors. Cursors can be applied to an element using the attribute "cursor". Let us see through an example, 5 different cursors on hyperlinks

<html>
<head>
<style>
.curCrossHair {cursor: crosshair;}
.curRightArrow {cursor: e-resize;}
.curHelp {cursor: help;}
.curMove {cursor: move;}
.curHourGlass {cursor: wait;}
</style>
</head>
<body>
<a href="#" class="curCrossHair">Cross Hair</a><br />
<a href="#" class="curRightArrow">Right Arrow</a><br />
<a href="#" class="curHelp">Help !</a><br />
<a href="#" class="curMove">Move me!</a><br />
<a href="#" class="curHourGlass">Wait</a><br />
</body>
</html>


The output looks like this:
Posted Image

We have thus defined five different cursors. In rich internet applications, using different cursors can enhance user experience. Visit script.aculo.us - web 2.0 javascript

It uses the .curMove style we defined in this chapter. See how user experience is improved because of it.

2. Position
Using the position attribute, you can define how the elements in your HTML page are positioned. The values for the position attribute are

  • 2.1 Static positioning
  • 2.2 Relative positioning
  • 2.3 Fixed positioning
  • 2.4 Absolute positioning

2.1 Static positioning
Static positioning is the default positioning in HTML pages. So declaring a position:static is redundant. It positions the elements as per the normal flow of HTML

2.2 Relative positioning
If you have several different elements that occupy the same place in HTML page, and if you want certain elements to overlap other elements, then relative positioning is the best choice for you. After specifying positioning to be relative, we can then offset the elements using properties like right, top etc. relative positioning is initiated this way position: relative;

2.3 Absolute Positioning
When we use absolute positioning, the element is positioned as a stack to nearest container element. If it does not belong to any container element, it will be positioned to top left of the browser window. It can be specified like... position: absolute

2.4 Fixed Positioning

In fixed positioning, the container of the element is always the browser window. Also, if you desire an element that shouldn't scroll down, for instance, a timer in an online examination page, used fixed positioning. Because elements having fixed positioning do not scroll along with the window. position: fixed;

3. Layers
Now that we have learnt positioning, you may have noticed that in some cases, elements overlap over one another. using the Layers concept in CSS, you can control which element appears on top of the other. In HTML, there is a concept of priority of elements. The element that comes later in the page will contain higher priority compared to the element that comes previously by default. In CSS, this priority can be altered using an attribute called z-index.

The larger the value of z-index, higher will be the priority of that element.

Let us see a sample code that combines the concepts of both positioning and layers

<html>
<head>

<style>
h1
{
position: relative;
top: 30px;
left: 50px;
z-index=2;
}

h2
{
position: relative;
z-index=1;
background-color=black;
color=white;
}

</style>
</head>
<body>

<H1>Now that we have learnt positioning, you may have noticed that in some cases, elements overlap over one another.
Using the Layers concept in CSS, you can control which element appears on top of the other.
In HTML, there is a concept of priority of elements.
The element that comes later in the page will contain higher priority compared to the element that comes previously by default.
In CSS, this priority can be altered using an attribute called z-index.
</H1>
<h2>
The larger the value of z-index, higher will be the priority of that element.
</h2>
</body>
</html>


4. Display
Have you ever seen menu's in HTML pages, that appear and disappear on the basis of user interaction. Well these menu's are controlled through Javascript. Javascript can be utilized to control the display i.e., to hide them and show them during runtime. This can be set in CSS using the display property. We are going to talk about two display properties, display: none and display: block;

display:none: This attribute in simple hides the element from user's view. Later on in code, on some user event, a javascript code can be written which then unhides the display.

display: block: Ever felt frustrated by typing
continuously to break the line. Stop worrying this attribute will automatically break the line.

Lets see an example for the display attribute
<html>
<head>
<style>
h2 { display: none; }
a { display: block; }
</style>
</head>
<body>

<a href='cssAdvancedTopics.html'>CSS Test</a>
<a href='cssAdvancedTopics.html'>CSS Test 1</a>
<a href='cssAdvancedTopics.html'>CSS Test 2</a>

<h2>
I won't be visible until javascript does something to me
</h2>
</body>
</html>


Here is the screenshot:
Posted Image

CSS Part 4: Common Attributes

07 February 2009 - 12:42 PM

CSS Tutorials
Chapter 4: CSS Common Attributes

We will list out common attributes of CSS categorically as follows
  • Font
  • Element Formatting
  • Background
  • Border
1. Font
font-family: Using this attribute, you can specify a list of fonts which are delimited by comma. The CSS engine will browse through the list of fonts you entered and will select the first font that is available. Make sure you specify at least one system font that suits your web page in the end of this list.

font-size: Using font-size you can specify the size of the font to appear in your HTML element. You can also specify the size in various units. The units can be appended to the end of the size. The units supported are cm, mm, in, pt, pc, px, %. We also have predefined font sizes like medium, large etc.

font-weight: Using this you can define how the text should appear. Values that you can give for this attribute are normal, bold, bolder, lighter

Lets see a code sample for Font attributes.
<html>
<head>
<style>
.myFontStyle
{
font-family: Comic Sans MS, Times New Roman, Arial;
font-size: 40px;
font-weight: bold;
}

</style>
<body>
<h3>I am on my own style</h3>
<h3 class='myFontStyle'>I am using myFontStyle</h3>
</body>


Here is the screenshot:
Posted Image

As you can see, I am running this script under Linux. But since Comic Sans MS is not something Linux system could have, the CSS engine took the next available font Times New Roman.

2. Element Formatting
color: Using this attribute, you can change the color of the text within the specified selector. There are two ways of giving a color value. You can either specify a color literal for standard colors like red, blue, lightblue, violet etc. OR you can specify a hexadecimal color code like #FF2131. The First FF stands for Red components which is set to its full. The second component 21 is for Blue component. And the third component, 31 is for green. So if you say color to be #FFFFFF it is white and #000000 it is black.

text-decoration: We have used this attribute in our previous examples. It specifies the positioning of a line relative to text. Possible values for this attribute include underline, overline, line-through.

Lets see a code sample for element formatting
<html>
<head>
<style>
.myFormat
{
font-family: Comic Sans MS, Times New Roman, Arial;
font-size: 40px;
font-weight: bold;
color: #FF3311;
text-decoration: overline;
}

</style>
<body>
<h3>I am on my own style</h3>
<h3 class='myFormat'>I am using myFontStyle</h3>
</body>
</html>


Here is the output:
Posted Image

3. Background
background-color: As you can guess, this sets the background color of the element on which this is applied. We can also specify the background-color to be transparent to show the color beneath the element.

background-image: Using this attribute, we can specify the image to appear as the background of the element

background-attachment: Specifies, how the image attached moves according the scroll of screen. This applies in cases where we have image larger than the corresponding container size. Values for this include scroll, background-repeat, repeat

We have already seen examples for some background attributes like background-color.

4. Border
Borders are another common thing that we utilize in HTML pages. The common attributes used for border tag include

border-style: We can specify the border style using this attribute. Values for this attribute include, border-style: none OR dotted OR solid OR double border-color: This attribute lets us specify the color for the border-style we chose earlier

Lets see an example for this,
<html>
<head>
<style>
.myBorder
{
border-style: dotted;
border-color: blue;
}

</style>
<body>
<h3>I am on my own style</h3>
<h3 class='myBorder'>I am using myBorderStyle</h3>
</body>
</html>


Here is the output for this code:
Posted Image

Now lets move to our final tutorial, Advanced topics in CSS.

CSS Part 3: CSS Selectors

07 February 2009 - 12:41 PM

CSS Tutorials
Chapter 3: CSS Selectors

We now move into the first advanced topic in CSS, the Selectors. A CSS Selector is basically what its name implies. It is used to "select" the elements on a HTML page so as to apply styles. The different types of CSS selectors are...
  • Type Selectors
  • Class Selectors
  • ID Selectors
1. Type Selectors
Type selectors is the most common selector used in CSS. A type selector simply applies the style to the corresponding matching HTML element in the page. Let us go through an example for this. Note that for examples in this tutorial, i would be using internal CSS. You are however free to use this in an external CSS and try it out


<html>
<head>
<style>
h1
{
color:pink;
}

h2
{
color:violet;
}
</style>
<body>
<h1>This is a pink rose</h1>
<h2>This is a violet sunflower</h2>
</body>
</html>


The output looks like this:
Posted Image

So basically the CSS engine built into the web browsers matches the corresponding tag between the < > brackets and applies the corresponding style attributes on them. Isn't this cool? Another important thing is that Type selector is so common that almost all modern browsers support them. So you can use them without any thoughts on browser compatibilities.

2. Class Selectors
To understand the need for class selectors, consider the following scenario. What if you wanted to apply a particular class of style to be applied to multiple elements in a HTML page? Lets say you want heading 3 as well as paragraph tags to be of a particular style say of a violet font color. It would be rather redundant if you use type selectors here. For such cases, introducing Class Selectors.

Consider the following code Code:
<html>
<head>
<style>
.violetBig
{
color:violet;
font-weight: bold;
}
</style>
<body>
<p class="violetBig">How do i appear on screen</p>
<h3 class="violetBig">This is Hi from H3... i am popular among HTML community</h3>

<br /><div style="z-index:3" class="smallfont" align="center">LinkBacks Enabled by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.0.0</div></body>
</html>
The output looks like this...
Posted Image

A class selector must start with a period followed by the name of the class. like the tag, .violetBig described above. Both the paragraph as well as h3 tag have specified the class name through the class attribute.

If we need class based specialization for a particular HTML tag, we can do so as given below.

 <html>
<head>
<style>
div.violetBig
{
color:violet;
font-weight: bold;
}

div.blueBig
{
color:blue;
font-weight: bold;
}
</style>
<body>
<div class="violetBig">I am a violet rose</div>
<div class="blueBig">I am a blue rose</div>
<br /><div style="z-index:3" class="smallfont" align="center">LinkBacks Enabled by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.0.0</div></body>
</html>
The output looks like this...
Posted Image

3. ID Selectors
Certain HTML elements in a document has an ID attribute. Using ID makes it easy to write and debug Javascript code. IDs are used to uniquely identify a particular HTML element in a page. An ID selector can be used to apply style attributes to a particular ID in a web page.

div#menuBar
{
font-color:green;
}

<div id="menuBar">
Home<br />
Products<br />
Services<br />
Contact Us<br />

</div>

The disadvantage of ID based selector is that it can be used only once in a given HTML page while class based selectors can be used as many times as we want.

CSS Part 2: Common Attributes

18 September 2008 - 05:57 PM

CSS Tutorial
Chapter 2: Basic Web Application design using CSS

There are two basic forms of writing CSS files. They are

  • Internal CSS
  • External CSS
1. Internal CSS
In internal CSS, your CSS code is tied with the same HTML sheet. It means that you write your style sheet code within the same CSS. In the examples that we saw in the previous chapters, we used internal CSS completely. There are basically two ways to write an internal CSS.

  • We can either put our CSS tags within <style type="text/css"></style> tag
  • We can embed the CSS within the attribute style of a HTML tag like <h3 style="color:red; text-decoration:none">I am special H3 tag</h3>
Designing CSS using internal CSS is good enough for beginners who are learning CSS. But to be a professional web developer, this is not a good technique. For instance, if you think of repeating the same <style> tag for every HTML page you write, don't you think it is redundant code and unnecessary replication. And worse still if you want to change the style of a button in a particular web page, you will end up modifying all the HTML pages. Imagine how much effort it would require.

So you may ask, that is there any way to write all the common style properties separately and make all the other HTML pages link to that file? The answers is yes.

2. External CSS
You can write all your style sheet related attributes in a separate file which is generally stored with the extension, .css. After doing this, we can link all the HTML pages to this CSS file. Let us see this through an example.

Create a new file called myStyles.css and add the following code to it

body
{
background-color: blue;
}

h2 {
color: lightblue;
border: thin black;
font-family: arial;
text-align: center;
}
Now create a new file called index.html in the same directory as in myStyles.css with the following content
Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="myStyle.css" />

</head>

<body>
<h2>Welcome to CSS tutorials</h2>
</body>
</html>
It should look like this:
Posted Image

In the above code, the line <link rel="stylesheet" type="text/css" href="myStyle.css" /> refers to the style sheet myStyle.css and presents it to the front end. Now any HTML file can refer to myStyle.css and reproduce the same design. Also if you ever need to change any style attribute, all you need to do is edit the myStyle.css and all the files that refer to it will now show you the change.

As you can see, we can set a lot of attributes for each element using CSS. In the above example, we have set the border, color, text alignment for the H2 tag. Other values for text-align can include, left , right also.

So as a web designer, you may now design your web application layout as given below

mainStyle.css
index.html


Folder Contact

--> contactStyle.css
--> contact.html
--> contactManagement.html

Folder Products

--> productStyle.css
--> productCatalog.html
--> productCart.aspx


As you can see from the structure above, the mainStyle.css can contain all the CSS attributes that are generic to the entire web application. Inside the folder Contact, we have web pages related to contacts. So if we need some special styling to be done in these files, we can override the parent settings or define new settings in a new CSS file, contactStyle.css. Now our HTML page, say contact.html can contain link to both the CSS files as follows

<head>
<link rel="stylesheet" type="text/css" href="mainStyle.css" />
<link rel="stylesheet" type="text/css" href="contactStyle.css" />
</head>
Now that we have seen web application design using CSS, we now move on to our third tutorial, CSS Selectors.

XML and VB

14 September 2008 - 08:13 PM

How does one go about reading XML data in VB6? I know PHP has built in functions to parse XML data, are there any VB6 equivalents?

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download