Including Style Sheets

Introduction

There are numerous different ways you can implement presentation style and layout to your website using CSS. This article will discuss how each can be applied in HTML, the pros and cons of the different methods and browser compatibility.

The Methods

There are three main different ways to embed CSS in your HTML. These different methods are called external, internal and inline.

External means linking to a separate CSS file entirely. This is done within the head tags using numerous methods, which are dicussed later. Secondly, internal refers to CSS embedded within the head tags, but are defined within the style tags on the HTML page itself. Finally, there are inline styles. These are applied within HTML tags.

Embedding Inline Styles

Inline styles can be applied to any element, below is a simple example.

<p style="color: #f00; text-transform: uppercase; text-decoration: underline;">Formatted text</p>

Formatted text

Embedding Internal Styles

Internal styles are fixed within the head of the document. All the CSS is within the style element, which has the type="text/css".

<head>
...
<style type="text/css">
p
{
	color: #f00;
	text-transform: uppercase;
	text-decroation: underline;
}
</style>
...
</head>

Including External Styles

External stylesheets can be called in two ways. Either using the HTML element; link, or the CSS property; @import.

The most common way to import an external CSS file is using link. An external, linked stylesheet can take three different relationships with the site. These are persistent, preferred and alternate.

Persistent

These stylesheets are always applied to the page and are combined with the active stylesheet. Persistent stylesheet links lack a title attribute.

<link rel="stylesheet" type="text/css" href="style.css" />

Preferred

Stylesheets with the same title attribute are applied to the page but are disabled when an alternative stylesheet is applied. If there are numerous preferred stylesheets, the first stylesheet takes precedence.

<link rel="stylesheet" type="text/css" href="style.css" title="default" />

Alternate

These stylesheets can only be selected by the user as an alternative to the preferred stylesheet. The persistent stylesheet is still applied. An alternative stylesheet can be applied by prefixing "alternate" to the rel attribute. These alternative stylesheets can be grouped, in the same way as the preferred stylesheets, with the same title attribute.

<link rel="alternative stylesheet" type="text/css" href="style.css" />

The examples assume the file style.css is in the same folder as the HTML document.

Using CSS Import

An alternative method to include external stylesheets uses the CSS property @import. You first set up an internal style block.

<style type="text/css">

@import url(path/to/stylesheet.css)

</style>

The difference between this and the link method is that the @import is part of CSS and not HTML.

Pros and Cons

The purpose of CSS is to achieve separation between content (markup) and presentation. Therefore, inline styles are a total conradiction to this goal and shouldn't be used.

Internal styles achieve separation, but fail on another good application of CSS, the fact that it is cached. Intermal stylesheets need to be downloaded with the HTML page and are not cached. However, intermal stylesheets are good when demonstrating CSS examples as the complete markup is shown within the source and no external files are needed.

External stylesheets are the perfect application of CSS. They allow complete separation between markup and presentation and they reside in a completely different file. This external file can be cached by the browser and be applied to every page separately.

In summary, external stylesheets should be used in almost all scenarios. Interal stylesheets are good for example pages as all the information is contained within one file and be can viewed simply via "view source". Inline styles should be avoided.

Addressing Specific Media

You can apply different stylesheets to different media platforms such as for print and small screen devices. An article on addressing different media can be found in the Web Standards section.

Unrestricted Access

Web Standards