RichInStyle.com CSS2 tutorial - Attaching style to pages

Introduction

There are three basic ways of declaring style data. The first is in the <HEAD> of pages, the second is at tag level and the third is in a separate external style sheet.

In each case, style sheets do not contain any HTML, just style commands. For example:

P {color: red}

is a style statement.

External style sheets

Linked style sheets

Style sheets are linked using the <LINK rel="stylesheet" type="text/css" href="name.css"> tag, which must go in the header of a page.

The tag's various attributes indicate things about the style sheet - the rel attribute, the type of link (a style sheet); the type attribute, the type of style sheet (always text/css); and the href attribute, the location of the style sheet.

Example

Once you have linked the style sheet to your page, you then have to create the style sheet. For example:

BODY {color: black;
font-family: Geneva, Helvetica, Arial, sans-serif;
background-color: white}

If you saved the example above as a style sheet, then every page that links to it will have the specified styles.

Linked style sheets are advantageous insofar as one style sheet can be attached to hundreds of files. Thus they are the only way to go if you want consistency of style, and indeed in my opinion they are the only way to go anyway. Their only disadvantage is that if a page is downloaded and read offline, the user is unlikely to bother to save the style sheet. The main reason for using them is that you can attach the same sheet to many files ensuring consistency and reducing file sizes.

Importing style sheets

Say you have standard corporate margins in corestyles.css:

BODY {margin-left: 0.5in;
margin-right: 0.3in}

However, you have different color schemes:.

@import url(corestyles.css);
BODY {color: red;
background-color: black}

The @import rule thus allows you to keep some things the same while having others different; and follows this syntax: @import url(nameoffile.css);. It must come at the start of the style sheet, before any rulesets (a ruleset is something like P {color: red}).

Alternatively it can be specified as @import "nameoffile.css";, as @import url("nameoffile.css"); or as @import 'nameoffile.css';. However, Internet Explorer only supports the url() formats, not the " and ' formats.

There are esssentially three reasons for using @import:

If you are writing for XML and your documents include right-to-left text (such as Hebrew), you are responsible for setting your own bidi, and to do this it is better to have a standard bidi style sheet:
@import url(bidi.css);

That way there is no chance of accidentally changing the bidi settings, and you can control the bidi of many style sheets.
You might have a standard style sheet that specifies the appearance of P elements, Heading elements and so on for the whole of a large site, but also areas that are specific to a small section of the site. That way, rather than copying out the whole style sheet, you can just import it. This helps in that it allows caching, which reduces the load on your server, and also means that when you make a change to the style sheet you only have to change one, rather than changing one and updating all the others.
You can modularize your style sheets; for example, you can have a margins module and a colors module. That way you can combine them without redundancy. For example:
@import url(margins3.css);
@import url(fonts1.css);
@import url(colors2.css);

could be the style sheet, using the fonts sheet 1, the margins sheet 3 and the colors sheet 2.

Embedded style sheets

Embedded style sheets are enclosed in a <STYLE type="text/css"> and </STYLE> tag. They go in the header of a page:

Note the  tags. These are the HTML comment tags, and are unnecessary for browsers that do support style sheets, but are essential for those that do not to avoid the unsightly problem of the style sheet appearing on the screen. This affects about 4% of all browsers.

They have two benefits over linked style sheets:

They do not affect all the rest of the style sheets that you might use
If a document is saved and read offline, the style will be maintained - users might not save linked style sheets.

Inline style

Any tag except the <HTML> tag itself can take the style attribute:

Inside the style attribute comes style declarations. In this example, the P element is being made green.

The most important difference between inline (tag-level) style and other styles is that by applying the style to an individual element, you have selected the element unambiguously, and therefore inline style does not use selectors. Thus with the example above, there is no need for a selector, whereas if you were making the element green in a LINKed or embedded style sheet, you would need to have P {color: green}.

In my opinion, inline style should be avoided, since it does not indicate why you have changed the style. Thus if you gave the paragraph above a name that indicates its content, you could easily change it. The means of doing this is discussed in the next section.

Overview so far

The bare HTML & CSS document should look like this:

And the CSS document looks like this:

...

Getting started

At this stage you should be able to create your own style sheet. Most probably you will do this by adding a <LINK rel="stylesheet" href="nameoffile.css" type="text/css"> tag to the HEAD of your pages. Then you will creating the file 'style.css'. Try creating one now - you should have got the idea how to specify that something should be red or green or whatever - P {color: red} or BODY {font-size: 16px}. When you've played around a bit, the next section deals with how styles are specified as applying to individual elements, etc.