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