CSS styles: a primer

On this page: A very basic guide to using Cascading Style Sheets to format your web pages.

This is some background information for the article on using CSS styles.

Separating content and presentation

HTML itself was conceived as a description of the semantics (i.e. the meaning of the content) of a hypertext document, rather than its appearance. So, for example, some text marked as heading 1 with <h1> tags means "this is the title for the most important section in this document", not "I want this text to be in 36 point Times New Roman". Anyone who has used more than one browser will probably have noticed that the same web page usually looks slightly different in two different browsers (although this is becoming less and less of a problem). This is directly from the roots of HTML, when pages were black text on a grey background, and it was left up to the browser to decide what a heading 1 should look like (see my browser comparison page for example).

The principle has been watered down over the years: people have come to expect what a heading 1 looks like, and the HTML standard evolved with the addition of assorted presentational elements (most notably, font specifications).

What are styles?

CSS styles are an attempt to go back to the roots of HTML, where the content and the presentation are defined separately. A style determines what each HTML element (heading 1, paragraph, list item etc.) should look like, and elements that are presentational only (fonts, bold, italic, etc.) are consequently deprecated.

Styles can be specified in a number of ways, but the tidiest is to link a page to a style sheet, which stores all the rules for how the page, and any others using the same style sheet, should be presented. A rule can specify all sorts of things about an element; for example, the font face, size and colour, background colour or image, spacing, margins and alignment. (To see the style sheet for this page, follow the link, then use the back button to return here.)

The appearance of a page can be much more closely controlled by using a style sheet than it can with "traditional" HTML. The more advanced aspects of the CSS specification allow things like absolute positioning of elements; for example, you can place a paragraph in the centre of the page more precisely than with tables.

This is only scratching the surface: if you want to know more, I suggest you start at » link to another, external, site Web Reference, and then visit the » link to another, external, site W3C site and » link to another, external, site index dot css for the details. And for some inspiration to see just what styles can do, please take time to explore the » link to another, external, site CSS Zen garden - a wonderful site!