University Libraries, University at Albany, SUNY Need Help? Search this Site Site Index
Home Catalog Database Finder Journals

Introduction to Cascading Style Sheets
How Cascading Style Sheets Work

The process by which Cascading Style Sheets work is surprisingly simple. The presentation styles for elements are defined in the style sheet. An element can be nearly any component on a Web page such as text, tables, and images. In addition, specific HTML and XHTML tags can have styles applied to them, too. This includes the body tag <body></body>, and all heading tags such as h1 <h1></h1> and division tags <div></div>. The collection of styles are grouped together into style sheets.

When a browser reads the HTML code of a Web page, it "sees" the reference to the style sheet. It then "goes" to the style sheet to determine how to display the element to which the style is applied. For instance, let's say that a browser detects a reference in the code of a Web page that mentions a style called "RedBold" that reference might look like this:

<span class="RedBold">Hello, Everyone! Welcome to our class today.</span>

The browser then examines the style sheet and discovers that anything noted as "RedBold" must be displayed in Arial font, size 14 pixels, in red (ff0000), bold, but no underlining. That, then, is how the browser displays the specified effect.

Hello, Everyone! Welcome to our class today.

What is the Cascade?

The term "cascade" refers to the way that rules apply. For instance, one linked style sheet document can be made that applies to all the pages in a Web site. That site could have two pages or a thousand. It does not make any difference. Let's imagine that one of the styles specifies that all h2 tags <h2></h2> must be in blue. Let's now image that there is a single page that requires the h2 tag to be red. It is possible to make an embedded style sheet that specifies all h2 tags on that page be red. The embedded style sheet on the page overrides the linked style sheet.

Now let's say that on that one page there is a single h2 tag that has to be displayed in yellow. You can make an inline style for that single h2 tag that causes it to be yellow. The inline style overrides the embedded style sheet, which overrides the linked style sheet.

The cascade also refers to the way certain specifications are inherited from styles higher up in the hierarchy. This may not make sense now, but it will later when you start to use style sheets. But an easy to understand example is this:

Advantages of Cascading Style Sheets

Cascading Style Sheet advocates promote their use for several reasons. CSS are described as miracle cures for all sorts of Web related problems. Style sheets are extremely useful, but they cannot be relied upon to sweep aside every problem on a Web site. Their effectiveness depends on many factors. However, they do offer lots of advantages that come as a surprise to some "old-time" HTML code writers.

Here are some Cascading Style Sheet benefits:

• CSS avoids conflicts between code that defines objects and code that specifies presentation.
Over the years HTML has become cluttered with tags that define objects and other tags that control how something is displayed. An object is most often text, but images and other elements on a Web page are also objects. For instance, the heading tags, such as h1, describe how important something is. H1 text objects are the most important, h2 text objects are less important, h3 text objects are even less important, and so on until h6. On the other hand, font tags <font></font> describe how something should look by using attributes such as color and font size. CSS separates definition from presentation thus making the code simpler.

Illustration of how CSS can tightly control the appearance of a Web  page• CSS tightly control presentation and assures consistency. This is extremely important. In the illustration on the right, there is a darker green column on the left side of the screen.

In "traditional" HTML the appearance of the text within that column is specified locally on each page. It is strongly desirable that the text look exactly the same on all pages of the Web site.

Unfortunately, over time it is likely that small errors will creep into the code. This occurs when the text has to be updated one page at a time. On one page the text may be specified as size 3. But on another page it may end up as size 2. Constant checking, double checking, and close attention to details are required to make sure the text looks identical on every page.

With cascading style sheets we can make a style in a linked CSS and give it any name we wish, perhaps something like "GreenColumnText." That style can be applied to the table cell that forms the column on each page. We can define the text size, style, font, color, background color, and other important features. Then when we type the text into the column it will appear exactly as we have defined it. It will appear the same on all pages.

If we later decide to make changes, such as the text size, we simply edit the style on the linked style sheet. The changes then appear in the green columns on all pages.

• Cascading Style Sheets save time. This is true most of the time, but it really depends on circumstances. CSS are what some people called "front end loaded." This means that the greater part of the work is done at the beginning and that there is less work needed later when the Web site has to be updated and edited.

HTML tends to be "back end loaded." It is often quicker to build a Web site in HTML or XHTML, but updating and editing is harder and takes more time when the site doesn't use CSS. Generally speaking, the larger the site, the more time that is saved later by using Cascading Style Sheets. For instance, when CSS are used, changing the font color on a site with 500 pages takes exactly the same amount of time as a making the change on a site that has 5 pages.

• Cascading Style Sheets allow several presentational formats to be used for one page. It is possible to define a page so that it is optimized for printing, viewable on a PDA, presented with full features, or as text only all by building creative style sheets.

Page 2

Tutorial prepared by Roger Lipera
Interactive Media Center
University Libraries, University at Albany