Cascading Style Sheets

A Motivational Example

A Motivational Example | Redefining The Tags | Including CSS Rules | Customizing Other Tags | Customizing Tags | Classes

To help you appreciate how style sheets can make your web design tasks easier, let's consider how we might add a bit of flair to section headings on a web page. The default browser <h1>,....,<h6> tags let you easily create headings in several different sizes, but they don't allow for much in the way of styling variations. For example, if you wanted to title a section with the medium sized heading "Some Examples of Animated GIFs" and you were happy with the default browser headings, you could get

by simply using:

On the other hand, if you wanted to display the heading in a different font face, size, color, etc., you could get something like:

as long as you were willing to go to enough trouble:

Note that to get this last heading you had to specify the font face, size and color, bold style, and even the paragraph break after the heading. (We've explicitly centered the two previous titles just so these examples won't be confused with the actual section headings on this page.)

Maybe detailing all of these specifications is not such a big deal if you just want to use your custom style for a single heading, or a few headings. But what if you need custom headings for a lot of pages, each of which has several titled sections? Or, a real nightmare, what if after you go to all that trouble, you have to change your style for all the headings on all the pages to a different look? Then you've got a major, major headache. You'll have to do a whole lot of work, essentially to make the same sort of changes over and over and over. Surely, there's got to be a better way.

There is a better way: you can use style sheets to redfine any or all of the <h1>...<h6> tags so that they will use the new versions whenever you want. In addition, if you later want or need to change the style of the headings, all you need to do is modify your style definitions, and the headings will be updated to reflect the changes. You can even set things up so that, if you wish, you can globally change the format for all of these headings for multiple pages, even for an entire web site, simply by changing your style definitions in a single place.

Right away we see that style sheets have the potential to save you enormous amounts of time and work (and eliminate the possibilities for mistakes that can always occur if you have to format each heading the old fashioned way). And this example is hardly even the tip of the iceberg when it comes to what you can do with style sheets.

Terminology: Style Sheets and CSS

Before we get to our examples, let's say a few words about the terminology we'll be using in our discussions. Sometimes we'll use css as simply an abbreviation for "cascading style sheets". At other times, we'll use css to denote a language in which style sheets are written. And on yet other occasions the term will be used in a general way so that either interpretation works.

In addition, we'll often omit the term "cascading" and simply refer to "style sheets" for the sake of brevity. But it should be pointed out that we're taking a short cut when we do this. Technically, "cascading style sheets" refers to a particular type of style sheets, which adhere to a specific set of conventions determined by the official web standards groups. There are other types of style sheets in use on the web, but these aren't widely supported and we won't discuss them here.

We also won't go into a long-winded discussion of the significance of the term "cascading". Let's just note that it isn't an empty buzzword; it refers to the way in which pages are displayed when there are conflicts in style definitions.