Home Up Overview Introduction Selectors Placing CSS Text Colors Measure Links Lists Cursors

 

 

What is CSS?

CSS stands for Cascading Style Sheets.

It provides a mechanism to separate content from the presentation for web pages.

How does it work?

A style is a definition of fonts, table appearance, colours, and so on.

Each CSS style has a unique name: a selector.

The selectors and their styles are defined in one place.

In your HTML you simply refer to the selectors whenever you want to activate a certain style.

For example:

Instead of defining fonts and colours each time you start a new table cell, you can define a style and then, simply refer to that style in your table cells.

Compare the following examples of a simple table:

Classic HTML

<table>

<tr>
 <td bgcolor="#FFCC00" align="left">
 <font face="arial" size="2" color="red">
 <b>this is line 1</b></font></td></tr>

<tr>
 <td bgcolor="#FFCC00" align="left">
 <font face="arial" size="2" color="red">
 <b>this is line 2</b></font></td></tr>

<tr>
 <td bgcolor="#FFCC00" align="left">
 <font face="arial" size="2" color="red">
 <b>this is line 3</b></font></td></tr>

</table>

With CSS (assuming that a CSS selector called subtext was defined)

<table>

<tr><td class="subtext">this is line 1</td></tr>
<tr><td class="subtext">this is line 2</td></tr> 
<tr><td class="subtext">this is line 3</td></tr>

</table>

Here the CSS selector named subtext tells the browser to use the defined style for the text between the <td> and </td> tags.  More about how we do that later...

Advantages of CSS

With CSS, you will be able to:

  • define the look of your pages in one place rather than repeating yourself over and over again throughout your site

  • easily change the look of your pages even after they're created. Since the styles are defined in one place you can change the look of the entire site at once.  

  • define font sizes and similar attributes with the same accuracy as you have with a word processor - not being limited to just the seven different font sizes defined in HTML.

  • position the content of your pages with pixel precision.

  • redefine entire HTML tags. For example, if you wanted the bold tag to display text in red using a special font - this can be done with CSS.

  • define customized styles for links - such as getting rid of that underline.

  • define layers that can be positioned on top of each other (often used for menus that pop up).

Your pages will load faster, since they aren't filled with tags that define the look. The style definitions are kept in a single CSS document that is only loaded once when a visitor enters your site.

The one disadvantage is:

  • these will only work on version 4 browsers or newer, which accounts for at least 98% of all browsers used.