Introduction to Cascading Style Sheets
Cascading Style Sheets (CSS) are the instructions loaded with HTML and XHTML Web pages to determine every aspect of any page element's look. When you have made the switch to using XHTML 1.0 Strict for marking up your Web documents, in fact, CSS is the only way to change the way a page looks.
A Big Switch from the Old Days
In the old days, visual information was included as attributes for HTML tags; this is part of the reason that so many people are now so afraid to touch their markup; a long series of complicated, cryptic attributes took on a series of often cryptic values. That mess is what most people envision when they find themselves terrified by the idea of coding a page by hand. Consider this old bad piece of code (which I actually retrieved from a live Website just this afternoon—it's still the old days for many sites):
<BODY text=#330000 vLink=#000000 aLink=#330000 link=#330000 bgColor=#cc6600>
You know what it does? Try and guess while I show you how the same visual attributes would be declared in CSS:
body {
background-color: orange;
color: #330000;
}
a:link, a:active {
color: #330000;
}
a:visited {
color: black;
}
Figured it out now? The CSS should help you; all we're doing is declaring the background color for the <body> tag, which is the same as declaring the background color for the whole XHTML document. Then, we take it a bit further and give the page's links some color values (both the so-called shorthand values that CSS accepts, like 'black', 'blue', 'green' and the hexadecimal colors that represent red, green, and blue values, for better color control).
Plain Language, 95% of the Time
Almost all of CSS's properties (background-color, width, margin, etc.) are plain language; no cryptic words. They are, with a few exceptions, exactly what they say they are—'background-color' controls the background color. Certain properties, like 'color', are just shortened; 'color' refers to text color.
Updated on Mon. Feb. 20 2006 at 11:13AM