oblaat

a guide to conceiving, creating & publishing your own website

How does CSS work?

You can buy a sewing pattern with eyes for the cut alone, but when you reach to realise it you remember that you will need to choose some appropriate fabric for the pattern—unless you wish to clothing out of tissue paper. You could, but people might not like it as much. Do you want this garment to be made out of cotton, or is nylon more appropriate? Should it be patterned or plain? What colour?

CSS, or Cascading Style Sheets, is what we use to style Web pages. A CSS file contains a list of rules about how different parts of a HTML document should look, while the HTML document descrbes those different parts. Together they make one neatly styled Web page, just like the pattern and your carefully chosen fabric.

CSS can be written inside of a HTML document using the style tag, but it is more common for CSS to be on its own file, and usually preferable. This is due to the modularity of CSS.

You can reuse the same pattern as much as you would like to make different articles of clothing with the same basic shape. You could also use some fabric to sew a skirt and later decide to use the same fabric to make a pair of pants—these two garments would clearly match each other, but they would still be different. The same applies for Web pages: one HTML file can use any CSS file, and one CSS file can be shared between HTML files.

If you can tell a HTML file to use a CSS file, you can tell ten HTML files to use that same CSS file—now they all look similar and you only had to write the code once. Likewise, if you make one change to the way your website looks, that change immediately appears on all of the Web pages that reference it. It's like magic!