Cascading Style Sheets - an Overview

The abbreviation CSS stands for Cascading Style Sheets. Most of the HTML coding examples we saw in the section “HTML basics” used the global HTML style attribute to apply style formatting of one kind or another to HTML elements. Applying styles to individual HTML elements in the way we have been doing is a rather time consuming and inefficient way of doing things, however. We can make life much easier for ourselves by using style sheets.

In the early days of the World Wide Web, web pages were written using just the hypertext markup language (HTML). Documents created with HTML were essentially just text documents. The “markup” consisted of a relatively small number of HTML tags that identified the text to which they were applied as being a heading, or a paragraph, or a list item, or a hypertext link, and so on.

The emphasis was on presenting information in a clear and unambiguous manner. HTML markup code was intended to define the organisational structure of the information within a document; the styling of the various HTML elements was not considered to be particularly important. As the web became more popular, however, a number of style-oriented HTML elements and associated attributes began to emerge.

The <font> tag is good example of the impact these new elements would have on the task of creating a web page. Introduced by Netscape in 1995, the <font> tag was standardised in the HTML 3.2 specification, which was published as a W3C Recommendation in January 1997. The <font> tag had two attributes - size and color - that allowed web authors to set both the font size and the colour of a block of text.

To make things even more interesting, several browser vendors also implemented support for a face attribute that allowed web authors to specify that a particular font face should be used to display text. If the specified font was not installed on the user's computer, the text would be displayed using the browser’s default font instead.

The new tags gave web developers far more control over the look and feel of a web page, but they also created some major headaches. The <font> tag, for example, had to be applied to each block of text in an HTML document individually. For large HTML documents containing a lot of text, this entailed either a significant amount of additional typing or (more likely) a large number of copy and paste operations.

A further problem was that every <font> tag used in an HTML document significantly increased both the size of the document file and the likelihood of errors creeping into the code. WYSIWYG HTML authoring tools alleviated the tedium of having to repeatedly insert <font> tags manually to some extent, but they also tended to exacerbate the problem of increased file size by producing significant amounts of unnecessary code.

Fortunately, a solution was already on the horizon in the form of cascading style sheets. The idea behind stylesheets was essentially to separate the structure and content of an HTML document from its presentational aspects. For example, suppose we have a website consisting of hundreds of pages; let's make the reasonable assumption that every paragraph of text in each page should be styled in exactly the same way.

Rather than using a <font> tag to specify the font size, font face and font colour for every paragraph of text in every page, wouldn't it make life easier if we had a separate style sheet file in which these text attributes could be defined with a single line of code? All we would then need to do is place a reference to this file at the top of each web page that says something like “read this file and format every paragraph of text according to the instructions it contains”?

If we later decide that a different font style would be more appropriate, we just need to change the relevant code in the style sheet, and the changes will take effect immediately in all of our web pages. And that, essentially, is what style sheets are all about.

The term “cascading” refers in part to the fact that we can apply several stylesheets to a single HTML file. If there are duplicate definitions of a particular style in two or more files, the definition in the last file referenced within the HTML file will override all others.

The term also (and probably more usefully) refers to the fact that we can add styles incrementally to specific HTML elements using classes. We might specify a particular style for all text enclosed within a paragraph element (<p> … </p>), for example, and then decide that there are certain circumstances under which we want the text to be displayed in italics, or emboldened, or at a different level of indentation - but otherwise maintaining any pre-existing styling.

The additional styling is defined within a style sheet and associated with the name of a class; the paragraphs to which the styling is to be applied are then labelled as belonging to that class so that the browser knows how to display them. In essence, you can define as many different classes as you require to customise your pages. Hopefully, the examples provided in this section will help you to create your own style sheets.