RichInStyle.com CSS1 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 CSS 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.

Alternate, preferred and persistent style sheets

In order to provide more choice to viewers of pages, you can use alternate style sheets. These allow users to select between different styles. There are three types of style sheet:

Persistent style sheets - these persist regardless of users' selections. These cannot be deselected by the user without disabling style altogether, and as such should contain styles that are essential to your page. They help reduce redundancy if coupled with preferred and alternate style sheets, since without them the same styles must go in preferred and alternate style sheets.
Persistent style sheets are specified thus (i.e., in the same way as described above):

<LINK rel="stylesheet" href="nameoffile.css" type="text/css">
Preferred style sheets - the preferred style sheet(s) are the default style sheet(s). If an alternate style sheet is selected, the preferred style sheet(s) will no longer apply.
All preferred style sheets applying to a given medium should have the same title, since if there are several with different titles, all but the first one specified will be ignored.

Preferred style sheets are declared in the same way as persistent style sheets, except they include a title:

<LINK rel="stylesheet" title="nameOfStyleScheme" href="nameoffile.css" type="text/css">
Alternate style sheets - these are not displayed unless selected by the user. They differ from ordinary style sheets in that they have an "alternate stylesheet" value for their rel attribute. They must have a title so that the user can select them:
<LINK rel="alternate stylesheet" title="nameOfStyleScheme" href="nameoffile.css" type="text/css">

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.

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, unnecessary for browsers that do support style sheets, but 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, but they are forced to save embedded ones since they form part of the page.

Media-dependent style sheets

You specify media-dependent style sheets with the addition of the media attribute to the LINK or STYLE element. For example, <STYLE media="screen" type="text/css">.

You may specify a list of media that a style sheet applies to by separating them by commas, as in media="screen, braille". There follows a complete list of valid media (note that these must be in the lowercase):

screen = standard computer screen
tty = fixed-pitch character grid, as with teletypes
tv
projection
handheld = handheld device - probably small low-res screen
braille
aural
all = applies to all media

Inline style

Any opening tag may take the style attribute:

<P style="color: green">
This P element will be 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:

...

The next section deals with how styles are specified as applying to individual elements, etc.