CSS Coding

You can place CSS code in 3 places. In this tutorial we'll look at how to do each.

In Tags

At the simplest level you could place the code within your tag. Using a STYLE attribute in any standard tag (like P) allows you to apply CSS formatting to the specific text which that tag applies to. So to make some text bold, you would put:

<P STYLE="FONT-WEIGHT: BOLD">This text will be bold</P>

The general format is STYLE="PROPERTY: SETTING".

In Pages

You can apply CSS rules to entire documents. By defining how elements should appear at the top of the page, that look is repeated wherever that element appears within the page. To do this, take all of your element definitions, surround them with a STYLE tag and place them anywhere in the page (most logically near the top). For example:

<STYLE>
HIGHLIGHT { FONT-WEIGHT: BOLD }
</STYLE>

Any HIGHLIGHT tags on the page will take this formatting.

If you need to define more than one property, you must separate them with semicolons. For example:

<STYLE>
HIGHLIGHT { FONT-WEIGHT: BOLD; FONT-FAMILY: "Arial" }
</STYLE>

External Style Sheets

The most powerful way to use style sheets is externally. All of your element definitions are held in a single text file from which all of your pages get the information that they need. The big advantage of doing things this way (apart from not having to repeat yourself) is that updating that one file changes the formatting throughout your site. So if I decided that my subtitles needed to be a bit bigger, I could change them all at once from the style sheet.

First you must create the CSS file. This is just a standard text file saved with a .css extension. The format of the element definitions is just like in the previous example - use as many elements as you like:

HIGHLIGHT { FONT-WEIGHT: BOLD }
AHIGHLIGHT { FONT-WEIGHT: BOLD; FONT-FAMILY: "Arial" }

I know I haven't told you what properties do what and take what settings, but we'll get to that later. Just trust me for now, OK?

Once you've done that you need to link your HTML pages to that style sheet file. This is done very simply by adding the following within the HEAD section:

<LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="styles.css">

Change the HREF attribute to give the path to your CSS file. Now all the elements defined in your style sheet can be used throughout your site.

In almost all cases you'll use external style sheets, because using the other two methods just seem to defeat the main point in my opinion. But you know about them, just in case you do want them for some obscure reason.

Overriding Settings

Before we move on, a quick note about priorities. If you combine the methods above, remember that CSS in tags overrides page-wide formatting, which overrides external style sheets. A simple way to remember it is that the formatting which applies is that which is closest to the element itself.