CSS stands for Cascading Style Sheets.

In my previous post about Perfectly Printable Web Pages I touched on the idea that web pages are made up of 3 distinct layers;

1. Content layer - Where the actual information resides, such as text, images, videos etc
2. Presentation layer - Where style information is specified, such as font sizes, colours, position of elements like the menus, logo etc
3. Behaviour layer - Where “clever” stuff can be applied, such as validating form fields

The presentation layer is controlled by a CSS file, most commonly a text document that your web page links to and sits separate from each of your web pages. Inside it there will be declarations for various page elements, and style information regarding how these elements should be displayed in a web browser.

A simple example; Inside the CSS file you might find a line such as:

P { font-size: 12pt; color: black; }

These styles always consist of 2 elements, the selector which defines what is being styled (P in the above example, which stands for Paragraph), and the attributes which actually supply the style information. In the example above the code is saying that all paragraph text should be in font size 12, and coloured black.

The advantage of storing this kind of style information in an external Style Sheet means that if we suddenly decided we wanted the text on our entire 1000 page website to be blue, we would only have to change it in one place, the above example would become;

P { font-size: 12pt; color: blue; }

And the whole website would change. So the benefits of working this way should be obvious.

Inheritance

Style information can be applied to any element on the page, but it wouldn’t be desirable to have to add specific styling to everything that appears. Fortunately, it is possible to specify style information for top level elements, which are inherited by the elements further down the structural hierarchy unless told otherwise.

For example, you might specify a font name for the BODY tag, which would control everything in the body of the page, meaning everything else on the page (contained within the BODY tag) would use the same font (paragraphs, menus, headings etc). We then set specific styles for things like menu links, without having to specify what font to use again, we may only choose to change the size, or colour we want to use.

What puts the “Cascade” in Cascading Style Sheets?

Websites can utilise more than one style sheet. Aside from the fact that different sheets can be attached for different applications (such as a print style sheet for controlling how your page will be printed), several style sheets can be specified for on-screen presentation.

A style sheet can import style information from one or more other style sheets. Styles which get imported into “parent” style sheets are said to cascade from those style sheets.

But why would you want to do this? Take this scenario…

A large company has several departments, each maintain their own areas of the central website. A core style sheet can be specified, which dictates the main corporate branding and style information, font sizes and colours, positioning of the logo, menu and things like that.

In addition to this core style information, each department can have its own set of styles, perhaps a different coloured header, different coloured link text for each department to set them apart. This is quite a simple example but hopefully illustrates the concept.

Using CSS for presentation has many benefits, which will be covered in a future post.