Understanding CSS

The technology behind style sheets is called CSS, which stands for Cascading Style Sheets. CSS is a language that defines style constructs such as fonts, colors, and positioning, which are used to describe how information on a web page is formatted and displayed. CSS styles can be stored directly in an HTML web page or in a separate style sheet file. Either way, style sheets contain style rules that apply styles to elements of a given type. When used externally, style sheet rules are placed in an external style sheet document with the file extension .css.

A style rule is a formatting instruction that can be applied to an element on a web page, such as a paragraph of text or a link. Style rules consist of one or more style properties and their associated values. An internal style sheet is placed directly within a web page, whereas an external style sheet exists in a separate document and is simply linked to a web page via a special tagmore on this tag in a moment.

The "cascading" part of the name CSS refers to the manner in which style sheet rules are applied to elements in an HTML document. More specifically, styles in a CSS style sheet form a hierarchy in which more specific styles override more general styles. It is the responsibility of CSS to determine the precedence of style rules according to this hierarchy, which establishes a cascading effect. If that sounds a bit confusing, just think of the cascading mechanism in CSS as being similar to genetic inheritance, in which general traits are passed on from a parent to a child, but more specific traits are entirely unique to the child; base style rules are applied throughout a style sheet but can be overridden by more specific style rules.

A quick example should clear things up. Take a look at the following code, and see whether you can tell what's going on with the color of the text:

 <div style="color:green">   This text is green.   <p style="color:blue">     This text is blue.   </p>   <p>     This text is still green.   </p> </div> 

In this example, the color green is applied to the <div> tag via the color style property. So the text in the <div> tag is colored green. Because both <p> tags are children of the <div> tag, the green text style cascades down to them. However, the first <p> tag overrides the color style and changes it to blue. The end result is that the first paragraph is blue, and the second paragraph retains the cascaded green color.

By the Way

You may notice that I use the term element a fair amount in this hour, and the next few hours, for that matter. An element is simply a piece of information (content) in a web page, such as an image, a paragraph, or a link. Tags are used to code elements, and you can think of an element as a tag complete with descriptive information (attributes, text, images, and so on) within the tag.

Like many web technologies, CSS has evolved over the years. The original version of CSS, known as Cascading Style Sheets Level 1, or CSS1, was created back in 1996. The later CSS2 standard was created in 1998, and although that still seems like a long time ago, only recently has CSS2 fully caught on with web browsers. With all the power and promise of CSS, browser support has always been an issue. Fortunately, browsers have finally caught up for the most part, and you can now safely use CSS2 style sheets without too much concern. So when I talk about CSS throughout the book, I'm referring to CSS2.

Watch Out!

Even with the latest web browsers, there are still a few CSS2 features that aren't properly supported. I point out these features, along with workarounds, as I present CSS in the next few lessons of the book.

You'll find a complete reference guide to both the CSS1 and the CSS2 style sheet languages at http://www.w3.org/Style/CSS/, which is also where you can go to find out which styles are part of which CSS version. The rest of this hour explains how to put the information from those reference documents to use in a way that is compatible with the current generation of web browsers.