Introduction to CSS

Cascading Style Sheets (CSS) are really a bolt-on system to HTML that will make your life a lot easier if you are working on more than a few pages. It can be difficult to get your head around and even then things may not work how you expect them to, but stick with it and you won't regret the work.

So what are CSS? CSS change the way you apply formatting to your HTML pages - you'll never need the FONT tag again. Instead you define formatting for regular tags, applying fonts, colours, sizes to a single tag that you can re-use as often as you like. For example, you could set the P tag to always display text in Arial at size 14.

CSS is so useful in fact that the W3C, which makes the rules about HTML, has now decided that the FONT tag should be phased out. This may sound impossible at first but soon you'll realise that it's easy. In the whole of code-warrior, I haven't used a single FONT tag, except when I've used it in a tutorial.

If your a beginner to HTML, I would leave this area until your comfortable with the basics. CSS is not a necessity and won't be for some time.

Elements

Elements are your tags - you define an element to have certain properties (see below) which control how your text looks.

An element can be an existing tag (for example, P or H1-6) or a new tag which you've made up (like BIG, GREEN, SUBTITLE). Keep the name descriptive so that you can remember what it does.

Properties

These are what define the appearance of your elements. In later tutorials we'll go through some of the more useful properties you can use, and what settings they take. Think of them like attributes in a normal tag.

An Example

To make all of that a bit clearer, let's do an example. We'll pretend that I want a tag called HIGHLIGHT to make text appear bold. The code I'd need is:

HIGHLIGHT { FONT-WEIGHT: BOLD }

Here our element is called HIGHLIGHT, and we've set the FONT-WEIGHT property to BOLD. So now if we put this into one of our HTML documents:

<HIGHLIGHT>This text will be bold</HIGHLIGHT>

Well, it's fairly self-explanatory really isn't it. In the next tutorial we'll use this example to look at CSS coding in more detail.