Introduction

There are several different ways you may include CSS in your HTML pages. That is, how do we get the rules to be applied to the HTML tags. Each has its own advantages and disadvantages. Picking the right method, or combination of methods, is important as it can reduce the amount of work you need to do and can also have a slight speed improvement for visitors to your pages.

The Ways

There are 4 main ways in which we may include CSS in our web pages. They are:

• Linked - An external file linked to your HTML document.
• Imported - An external file imported into another file (typically a CSS file).
• Embedded - A set of CSS rules included within your HTML document.
• In-line - CSS rules applied directly within an HTML tag.

Linked CSS

Linked CSS is one of the more popular methods for including CSS. With linked CSS we write all our rules in an external file (typically with a .css file extension) then include the following line within the head of our HTML document.

<link href="css_file.css" rel="stylesheet" type="text/css" media="all">

The link tags should typically be placed in the head of the document (see example below). You may link to more than one style sheet if necessary. To do this you include a separate link tag for each style sheet.

The href attribute of the link tag contains a URL or path to the style sheet to link to. This is similar to the href of an anchor tag and may be either an absolute or relative path.

The rel attribute is used to state the relationship of the resource to the document. For CSS we use the value stylesheet. We may include alternative stylesheets by using multiple link tags and using the relationship alternate stylesheet as the attribute value for the non main stylesheets. We may want to do this if we have alternate style rules for visitors with vision impairment or colour blindness for example. Unfortunately, most browsers now require you to install an add on to obtain this functionality.

The type attribute allows us to tell the browser what the resource is. Most of the time you will be including your CSS from a plain file and in that case this attribute may be left out. It's only when we start to do fancy things such as dynamically generating our CSS by way of a script that this attribute may be required, or when linking other resource types.

The media attribute allows us to define for which media types the rules in this style sheet should be applied. The media could be one of the following:

• all - for all devices.
• screen - for computer screens.
• print - for when the document is printed.
• speech - for when the document is spoken (eg. when using a screenreader).

It is common, for instance, to include a second style sheet with the media set to print which changes the background colours of the page to be white, hides the side menu etc so that it is cleaner for printing.

If you leave out the media attribute then the default is all.

Let's have a look at an example of linking CSS.

A linked style sheet like this should contain only the CSS rules and nothing else. Do not include any HTML tags in this file.

And now some HTML for it to be applied to (Note: the link is on line 7):

(Note: We assume here that the style.css is in the same directory as our_page.html. If it was not then you would have to modify the URL accordingly.)

And finally, the result:

The benefits of using linked style sheets are that we may write all our rules into one file then link that file to as many HTML documents as we like. Then we can make changes to a single file and see those changes across all our HTML files. Write once, affect many. Another benefit for the end user is speed. Once the external style sheet has been downloaded the first time the browser will cache it (keep a copy). Then as you visit other pages it doesn't have to keep re downloading the rules.

Imported CSS

With imported css we can merge the rules included in one CSS file with the rules in another file. To do this we use the keyword @import in our stylesheet.

@import url("more_styles.css") media-types;

This line must be included in the CSS file at the very top before any rule declarations.

The media types are the same as for the media attribute in linked CSS (see above) and determine if the file will be imported or not. This is optional and you can leave it out if the rules should always be applied.

Let's look at an example. Here, department_store.css will be imported into sports_styles.css which will then be linked to the HTML document.

Importing can be useful to get finer grained control over how our CSS is applied to our HTML pages. A good example of this is a department store. We probably want overall styles to be applied across all pages such as what the headings and menu look like etc. Then we may like each department within the store to have it's own colour scheme so it is easily identified. The ideal way to do this is to create a file with all the main styling in it. This file is then imported into a separate file for each department which then defines rules for the colours. Finally these department style files are linked to the relevant HTML pages.

Embedded CSS

With embedded CSS we don't have the CSS in a separate file but instead include it at the top of the HTML document within the head. We include it within a set of style tags.

<style>
style rules here
</style>

Let's look at an example:

In this method the style is separated from the content in that the style rules are at the top in the head and the content is in the body. It isn't ideal however as you have to include the CSS in every page of your site. If you had 10,000 pages in your site then had to change the colour of the headings imaging how much fun that would be.

In-line CSS

With in-line CSS we place the rules relating to a tag directly within the tag.

<tag style="rules" >

Here is an example:

This is about as horrible as you can get as all the CSS styles are messed in with the HTML. You'll probably have to end up repeating code multiple times as well. You'll also make your code rather hard to read.

Overriding Rules

It is possible to use several of these methods at the same time. When you do so, you may be wondering, "what if I include the same rule but with different values in the different methods?"

The different methods have a precedence depending on how close they are to the HTML. That is, rules that are closer to the HTML will override rules that are further away if they conflict. Here is the order of precedence from closest to furthest away:

• in-line will override
• embedded will override
• linked will override
• imported

Rules that don't clash will be combined, so if you have a rule in your embedded styles to make headings underlined and another rule in your linked styles to make headings green then they will be combined and headings will show as underlined and green.

The activities below will ask you to experiment with this. Playing about with it yourself is generally the best way to fully understand it.

So What is the Best Approach?

The best approach is typically a linked stylesheet. It keeps all the rules in one place reducing our workload (no matter how many pages we have) and also will reduce the download time slightly for the end user. If we want finer control with different sections of our site showing slightly differently then imported style sheets should be added in too.

If we have just a single page (and we know that is not going to change) then embedded may be a better way to go. For the user to download one file instead of two will be slightly more efficient. It can also be good if you are trying to demonstrate some code and you would like your end users to be able to view the source and easily see the CSS and HTML without having to flick between two different files.

In-line should be avoided as much as possible. In general they should be avoided at all costs but there are a few occassions where use of them may not be completely frowned upon. A good example of this is when you are entering content using an online form (on your blog or similar). Normally they use a WYSIWYG editor but also have a feature to switch over to code. Because such systems generally don't allow you to edit the system wide rules (which are probably linked), in-line is the only way to go if you have a specific visual effect you wish to create.

Summary

Activities

I know we haven't looked at many rules yet so for these activities use some of the rules we have seen in the examples. As you change the code in your files you may need to refresh the page to see the changes (rather than just reloading it), this is because the browser will cache the page by default.

• Take your page and change the colour of the headings by way of each method listed above.
• Now include all the methods and include a different colour for the headings in each type. Take them in and out of the different methods and observe which takes precedence over the others.
  
  Here are some other colour codes to play with: #999999, #cc3355, #33aa88 and #1173c2.
• What happens if you have embedded css before a linked style sheet and then switch them around (eg now the code for the linked style sheet apears in the head of the document before the embedded styles)?