CSS stands for Cascading Style Sheets. It is a way to divide the content from the layout on web pages.

How it works:
A style is a definition of fonts, colors, etc.
Each style has a unique name: a selector.
The selectors and their styles are defined in one place.
In your HTML contents you simply refer to the selectors whenever you want to activate a certain style.
For example:
Instead of defining fonts and colors 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 selector called subtext is 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>



While CSS lets you separate the layout from the content, it also lets you define the layout much more powerfully than you could with classic HTML. 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. (Ever get tired of defining colors and fonts each time you start a new cell in a table? Those days are over with CSS!)

- 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. (Ever get tired of replacing tags throughout your site when you want to change the look of a certain element? Those days are over with CSS!)



- 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. Say for example, if you wanted the bold tag to be red using a special font - this can be done easily with CSS.

- define customized styles for links - such as getting rid of the 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. However, more than 95% of all browsers live up to that.

HOME
CSS
HTML
JAVA