• General syntax
• Linking Style Sheets to HTML
• Examples of selectors
• Inheritance, pseudo classes and elements
• CSS positioning

Style Sheets are defining for the Web browser how to present a document.

These are the basic types of presentational information, called properties:

• Foreground and background colors and background images.
• Fonts properties.
• Text properties (word spacing, letter spacing, etc.).
• Boxes (margins and borders around block elements, floating elements, etc.).
• Classifications (control over list styles and the formatting of elements e.g. whether they should be presented inline or displayed as a block).

The basic syntax for defining the CSS is the following:

<STYLE TYPE="text/css">
selector1 { property: value }
selector2 { property1: value1; property2: value2 }
............
</STYLE>

Example:

<STYLE TYPE="text/css">
<!--
BODY { color: green; }
H2 { text-decoration: underline;
     color: blue;
}
-->
</STYLE>

Linking Style Sheets to HTML

There are tree ways to link style sheets to your HTML:

• Embeed in HTML - Embeed the style sheet inside HTML with STYLE tag.
  e.g.:

    <STYLE TYPE="text/css">
    <!--
    BODY { color: green; }
    }
    -->
    </STYLE>
  

• Link to external style sheet - Using the <LINK> tag, which should be placed in document's HEAD.
  In the external style sheet file you put only the rules, whithout any <STYLE> tags. e.g. <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen, print>

• Import external style sheet - The style sheet can be imported using the CSS's @import statement.
  e.g.:

    <STYLE TYPE="text/css">
    <!--
      @import url(http://www.company.com/style.css);
    </STYLE>
  

• Inlining style - The style sheet can be inlined inside other tags.
  e.g.: <P STYLE="color: red;">some text here</P>
  Note, that it's the most inflexable way, so probably you don't want to use it :)

Here are some examples on the different types of rules:

Source	Result
Class Selector:
Need to define the diffrent styles for the same element you can use classes.
<STYLE TYPE="text/css"> H4.exmpl1 { text-decoration: underline; text-transform:uppercase; color: blue; } H4.exmpl2 { border-width:4pt; border-style:outset; padding: 4pt; background-color:#909090; color: green; } </STYLE> <H4 CLASS=exmpl1>This is exmpl1 class</H4> <H4 CLASS=exmpl2>This is exmpl2 class</H4>	This is exmpl1 class This is exmpl2 class
<STYLE TYPE="text/css"> /* class can be defined without an associated element */ .red { color: red } </STYLE> <EM CLASS=red>This is red EM element</EM><BR> <B CLASS=red>This is red B element</B>	This is red EM element This is red B element
ID Selectors:
ID selectors used to define rules on a per-element basis. ID should be unique in whole document.
<STYLE TYPE="text/css"> #myid100 {color: green} </STYLE> <EM ID=myid100>This is ID selector example</EM>	This is ID selector example
Contextual Selectors:
These selectors define the properties of the element in some context. They will take precedence over simple selectors according to the rules of cascading order.
<STYLE TYPE="text/css"> P BLOCKQUOTE { color: green; text-decoration: line-through; } </STYLE> <P><BLOCKQUOTE>This text inside the paragraph</BLOCKQUOTE></P> <BLOCKQUOTE>This text outside the paragraph</BLOCKQUOTE>	This text is inside the paragraph This text is outside of the paragraph
Grouping
You can group selectors together
<STYLE TYPE="text/css"> H3.exmpl4, H4.exmpl5 { text-decoration: underline; text-transform:uppercase; color: red; } </STYLE> <H4 CLASS=exmpl5>This is H4 exmpl5 class</H4> <H3 CLASS=exmpl4>This is H3 exmpl4 class</H4>	This is H4 exmpl5 class This is H3 exmpl4 class

Inheritance:
Almost all selectors which are nested within selectors will inherit the property values assigned to the outer selector unless otherwise specified. For example, a color defined for the BODY will also be applied to text in a paragraph or table.
There are some properties which are not inherited, e.g. in case of margin-top property, but these are logical.

Pseudo classes and elements:
Pseudo-classes and pseudo-elements are special, predefined "classes" and "elements".
Their syntax is the following:
selector.class:pseudo-class { property: value }

Pseudo-classes:
• A:link - regular link
• A:visited - visited link
• A:active - currently active link (on mouse over)

  Pseudo-elements:

• first-line - first line of any block element (e.g. paragraph, H?)
• first-letter - first letter of any block element

CSS positioning:
CSS positioning is an extension to CSS1 that lets you control an object's precise position on the page. You can also layer objects on the page and specify if they are visable or hidden.
When browser renders each object on the page it puts it into the so-called 'bounding box', which is basically invisable rectangle. You can set the exact position for each 'bounding box' using the absolute positioning (coordinates from the edges of the browser) or using the relative positioning (coordinates from some other elements on the page, usually previous element).
Objects can be hidden or visable and they can overlap, in which case browser will use clipping. You can use z-index property to layer the objects on top of each over, creating the 3D layering.

Example:

Source	Result
<STYLE TYPE="text/css"> .over { position: relative; top: 10px; left: 5px; z-index: 2; background-color: #909090 } .under { position: relative; top: -10px; left: -5px; z-index: 1; background-color: #a0a0a0 } </STYLE> <SPAN CLASS=over>This is the over text, which is higer than the second text. His z-index is 2.</SPAN> <SPAN CLASS=under>This is the under text, which is lower. It's z-index is 1.</SPAN>	This is the over text, which is higher than the second text. His z-index is 2. This is the under text, which is lower. It's z-index is 1.
<STYLE TYPE="text/css"> .plain { position: relative; top: 5px; left: 5px; width: 150px; height: 100px; background-color: #909090 } .clip { position: relative; top: -70px; left: 0px; width: 100px; height: 100px; background-color: #a0a0a0; color: blue; clip: rect(25px 125px 125px 25px) } </STYLE> <SPAN CLASS=plain>This is a block of a plain text, just sitting here, doing nothing, just to taking some place...</SPAN> <SPAN CLASS=clip>1 2 3 4 5 6 7 8 9 0 - = q w e r t y u i o p a s d f g h j k l z x c v b n m , . </SPAN>	This is a block of a plain text, just sitting here, doing nothing, just taking some place... 1 2 3 4 5 6 7 8 9 0 - = q w e r t y u i o p a s d f g h j k l z x c v b n m , .

To play with CSS, try CNET's Style-o-Mattic - a very nice tool to play with.

Summary:
CSS are extremely useful in many ways. They allow you to use the similar styles on all the pages. They allow to create much nicer Web pages with a lot of special effects. Use them, but don't abuse them! :-)

More info on CSS can be found here.