How do style sheets work?

How do style sheets work?

All right, we've seen that style sheets are just text files, or text embedded in the head of an HTML document, that somehow help separate content from appearance. The content of a page goes into an HTML file. And the appearance goes into a style sheet. But how does all this end up as a web page in the reader's browser?

Think of a style sheet as a set of instructions, suggesting to a web browser how to draw a page. Note that I say "suggest" not "tell", because CSS does not force a browser to display a page in particular way, it merely suggests to the browser how the page should be displayed. This is an important distinction.

The parts of a style sheet

Every Cascading Style Sheet (whether it is contained in a .css file, or embedded in the head element of an HTML document) is a series of instructions called statements. A statement does two things:

1. it identifies the elements in an HTML document that it affects
2. it tells the browser how to draw these elements

By elements, I mean paragraphs, links, list items and so on. In technical HTML terms, an element is anything marked up inside HTML tags.

The part of a statement which identifies page elements is called a selector. Selectors select page elements.

The part of a statement which tells a browser how selected elements should be drawn is called the declaration. A declaration can contain any number of properties, the individual pieces of style to be applied to the selected element.