One Central Stylesheet

This is how you should use most of your CSS. You write just one .css file and have all your pages referencing it. This way, a change to anything in this one file will adjust this thing (a font, for example) across your whole site. You could change your entire colour scheme with one modification if you want, over an unlimited number of pages. That’s one of the things CSS was designed for — flexibility.

To create your stylesheet, open a text editor (NotePad or SimpleText will be fine). Remember in the very first lesson on this site, you learned how to save from a text editor into the .html file format? Well, here you’ll be doing roughly the same except your file will have a .css suffix. Just save a blank file as mystyles.css and put it in the same directory as your homepage. Now that you have that, I can show you the syntax used in CSS:
Very Important selector {property: value; property: value; property: value; }

And now a worked example:

p {color: blue; font-size: 120%; }

Just put that one line into your file for the duration of this tutorial. That’s all you need. This rule applies to all paragraph elements. Once you’ve linked the stylesheet to your pages, having this style declaration in your css file would make all the text in your pages enclosed in the <p> and </p> tags blue, and sized 120% as big as the default font size.

This is how all the affected paragraphs will be formatted.

Have a look over these rules:

    The selector is usually the name of a tag, without its surrounding angle-brackets.
    The braces are {curly}, not [square] or (round).
    After the property name there is a colon, and between each individual part there is a semicolon. Each of these pairs of properties and values is a declaration.

You could add another line in under your first one. Try this line of CSS and then use some large headings on your page:

h1 {font-family: Verdana, sans-serif; color: red; font-size: 20px; }

Your stylesheet should look something like this. If you want to affect multiple selectors with the same CSS formatting, add them all together, with commas:

p, div, h1 {color: #00DDFF; width: 80%; } /* modifies all 3 tags */

As above, you can also add comments to your stylesheet using the /*...*/ delimiters. These can give you or anyone else using your stylesheet vital tips about what’s going on in your code.