CSS Tutorial - Chapter 2: Introduction

If you happen to have read my XHTML tutorial before arriving here, you might remember that I there explained HTML code as being a "magic box" of sorts. Just like we can stick a regular paper label on a box to help us keep track of what's in it, HTML code tags take this one step further and actually create in the box whatever you write on the label. I made up this example:

  <apple> Rock </apple>

...in which an innocent rock was placed inbetween two "apple" tags, effectively converting the poor rock into a tasty apple. In theory, of course, since this example doesn't actually work.

Moving from here onto Cascading Style Sheets, we might say that the CSS is what defines how the apple would be created. What attributes should it have? Should it be red? Green? Should it be hard, or soft? Tasty? Rotten, perhaps?

In a sense, we could say that the HTML / XHTML provides us with a bunch of nouns (the objects that make up your page layout) and CSS then provides all the adjectives needed to describe them.

This is really all that CSS does, in a nutshell. So to sum it up, it works kind of like this:

  • First comes the written content. It's simply text, within a plain text file.

  • Then comes the HTML tags, sweeping in around the content, hacking it up in little manageble bits and telling web browsers worldwide what's what and where to put it.

  • Then finally, the CSS. Read in by the webbrowser, who meticulously has to sit and match it all up with all the little referencing HTML tags for us, the CSS information tells it exactly how to draw everything out, what colors it should have, if it should have borders, particular fonts and font sizes, backgrounds, etc. The list can be made very long.

That's pretty much it for how CSS works. Now let's move on to learning what all these properties are and how we can apply them!

< Previous: Preparations

robert@eagleowl.se     +46 (0)26-16 13 61     www.eagleowl.se
©2021 EagleOwl