From Htmlpedia
Contents |
Cascading Style Sheets
Definition
Cascading Style Sheets are a language for controlling the presentation of elements within an HTML document. There are three different types of styles: inline, document, and external styles.
Inline Styles
Inline styles apply to one particular element in an HTML document and no others. So, for example, if you wanted a brief span of red text and only needed ONE such span, you might write code like this:
 | <span style="color: red;">Fire is red.</span> |
Inline styles should be used rarely, because they are hard to maintain. Suppose you have spans in two different colors:
| <span style="color: red;">Fire is red.</span>
<span style="color: blue;">Water is blue.</span> |
If you have a hundred spans in a document, 60 red ones and 40 blue ones, and you decide that the red ones should be green instead, then you have to go through and change all the formatting for each tag. Search-and-replace can help with this; but if your document is more complex than this, automated replacement becomes much more difficult.
Document Styles
Document styles are defined in the HEAD of the document, and apply to all elements within the document that match the style's selector. So, for example:
| <head>
<title>CSS example</title>
<style type="text/css">
.red { color: red; }
.blue { color: blue; }
</style>
</head>
...
<p>
<span class="red">Fire is red.</span>
<span class="blue">Water is blue.</span>
</p> |
The selector ".red" refers to every element with the CLASS attribute set to "red". Later, you can alter the appearance of all those elements by altering the one line defining the class's color:
| .red { color: orange; } |
All the elements of the "red" class will now display as orange instead.
Document styles are good for unique documents, or documents within a larger site that require unique formatting instructions. To control multiple pages across an entire site, however, you need external styles.
External Styles
External styles are defined in stand-alone files and linked to in the HEAD of each document. Thus:
| <head> <title>CSS example</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> |
Multiple documents can share a single stylesheet. This is where style sheets really shine: when you use a stylesheet to control the appearance of multiple HTML documents, you can alter the appearance of all those documents at once by editing the single CSS file. Changes take place instantaneously across the whole site. This makes maintenance or updates considerably easier.
References
- W3C Specification: Cascading Style Sheets, Level 1
- W3C Specification: Cascading Style Sheets, level 2 revision 1
- W3C Specification: Cascading Style Sheets, Level 3 (Work in Progress)
- Cascading Style Cheatsheet with many examples
- CSS Zen Garden: http://www.csszengarden.com/ (demonstrates the many ways CSS can alter the appearance of a page without changing its HTML)
- HTMLpedia: List of CSS Properties
