Jumpstart into the Web technologies: <- Prev. Start Contents References Home Next ->
Cascading Style Sheets (CSS)

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

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

The basic syntax for defining the CSS is the following:

<STYLE TYPE="text/css">
selector1 { property: value }
selector2 { property1: value1; property2: value2 }
............
</STYLE>
Each rule is made up of a selector (usually an HTML element such as BODY, P, H1 etc.) and the style to be applied to the selector. The style consists of the list of properties and values.

Example:

<STYLE TYPE="text/css">
<!--
BODY { color: green; }
H2 { text-decoration: underline;
     color: blue;
}
-->
</STYLE>
The first rule sets the default text color to green. The second rule defines, that heading 2 will be underlined and with font color blue.
The reason it's good to put the rules in comments is that if browser doesn't support the CSS it'll not be shown.

Linking Style Sheets to HTML

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

Note here, that you can use different MEDIA to specify different style sheets in case of screen, printer, projection etc. - But this attribute is not working in Netscape 4.x, it'll ignore the style sheet with this :-(

Here are some examples on the different types of rules:
SourceResult
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 }

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:
SourceResult
<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.

Jumpstart into the Web technologies: <- Prev. Start Contents References Home Next ->

Copyright © 2000 Sergey Gribov