Ways of Inserting CSS Style

The previous article, the Basics of CSS, introduced you to the basic structure of the CSS language, and a basic way of inserting it. There are two other ways of inserting CSS into your documents. This article will describe all three, and compare their uses.

Inline

An inline CSS style is one that is applied directly to an element. This is contained within the document stream. You might apply styles directly to one element, like a paragraph. An inline style does not affect any other elements in the document apart from the ones it is applied to. Take a look at the following code example:

As you can see the style is applied in the 'STYLE' attribute of the P element. This means there is no need for selectors as the styles are being applied directly. There are no braces included either, you must still put in the colons and semicolons to separate out the styles though.

Global

A global style sheet is a group of styles that are applied "globally" to the entire document. This was described in the previous article, The Basics of CSS. The full style definitions are included in between the <STYLE> tags in the HEAD section of the document.

The <STYLE> tag has the TYPE attribute. This is to let the browser know that the contained code is in the CSS language.

External

Possibly the most powerful of these three methods of inserting is the external style sheet. The external style sheet is a separate text file with the *.css extension. This file contains the CSS definitions that you want applied to many pages in your site. Each page you want to contain the definitions you add in a StyleSheet link. The link appears in the HEAD section of the document:

This link retrieves the styles stored in the file "style.css" and applies them to the page. The HREF is the location of the file "style.css" relative to the document, as in normal text, or image links. The TYPE attribute is also set, as in the Global method, to tell the browser that the format is CSS.

Uses For the Different Methods

Each of the different methods of inserting CSS has its advantages. Inline styles are useful for creating complex CSS effects that you can do with the <FONT> tags. It is not a good idea though to use Inline styles to apply styles to your whole site. Global styles are good if you have only a few pages each with their own basic styles. The most powerful however, is the external style sheet method. With external style sheets, if you have a large site, you can modify the *.css file and the change will be reflected throughout all the pages that link into that file. I would recommend that if you have a site over five pages then you should try creating a CSS file for your styles.

CSS Tutorial: [last article]; Previous Article - The Basics of CSS