Including CSS Rules

Advanced Methods | Including CSS Rules

Including CSS Rules
There are three different ways you can add style sheet capabilities to a page. Each method provides a different degree of access. You can:

add a css rule inside a single tag; then the rule applies only to that instance of that tag
put a rule in the <head> tag of a page; then the rule can apply to the entire page
put a rule in an external file; then the rule can be applied to multiple pages (even an entire web site)
Methods 2 and 3 allow us to create a new "default" version of a tag, for a page or set of pages, respectively. Method 1 is most often used to override one of these new defaults on a case-by-case basis, either to return to the original browser's default version of a tag or to create a new one-time use version of a tag. Now let's look at examples of each of these approaches.
Method 1:
Applying a Single CSS Rule Inside a Single HTML Tag

At one extreme of css accessibility, we can arrange that a rule applies only to a single instance of a tag. We can do this by adding a css rule inside the particular tag that we want to affect.
For instance, suppose we've used method 2 or 3 (we'll see how to do this in a moment) to create a new default version of the <h3> tag that has the charactersistics shown in our example above: a dark red (cc0000) bold sans-serif font at 16pt. But now, for some reason, we decide we want one <h3> tag on one of our pages to show the heading in dark green (00cc00) italics.
We could always go through the procedure that we had to use before the availability of style sheets: use the <font> tag to specify all the characterstics we want for this particular heading (and add <p> after the heading). But now, since we've used style sheets to create a new default version of <h3> we can also use css to modify only those properties of the new default that we want to change for this particular heading: We do this by adding css to redefine these properties inside the tag that we want to modify:

<h3 style="font-style: italic; color: #00cc00;"> H3 Heading in Green Italics </h3>

Note that we add the css rule to the tag by introducing a new attribute for the tag: style. The value we give this attribute is just the list of new definitions that we want to provide for the <h3> tag in order to override its default properties. Namely, we include font-style: italic to put the heading in italics and we include color: #00cc00 to make the heading dark green. Each definition consists of the name of the property to be defined and the value that the property is defined to have. The property and its value are separated by a colon. Consecutive definitions in the rule are separated by semicolons. The entire rule (i.e., the value assigned to the style attribute of the tag) is enclosed in quotes. Here's the rule in action: Example 2.
Method 2:
Putting CSS rules on the HTML Page Where They Are Used

Now let's see how to modify a single HTML page so that the set of six css rules we listed above will create new default versions of the <h1>,..., <h6> tags on this page. All we have to do is add the following inside the <head> tag of our page:

<style type="text/css">  </style>

Note that this is just the set of six css rules we defined earlier, now enclosed inside <style> and </style>. Also note that <style> has an attribute here:
type="text/css" This attribute identifies the type of style sheet being specified (as we noted earlier, there are actually other types of style sheets than cascading style sheets, but these alternative types aren't widely supported). Including this information probably isn't really necessary for newer browsers; these browsers should be able to determine the correct style sheet type from the syntax of the rules. But doing so is probably a good idea since it may help older, pre-css-capable browsers ignore the code (also see the next paragraph). Including the attribute may also help people who examine this part of your HTML page's coding.
Note that we've also enclosed the six rules inside an HTML comment (just inside <style> and </style>). It's not absolutely necessary that you do this, but it's a good idea. This will also help make sure that older, non-css capable browsers won't see (and perhaps attempt to display literally) the css rules.
Here's another look at these rules in action: Example 1. After you click this link, use your browser to view the source of the page that's loaded into the new window. Look at how the sections headings are produced on this page: no <font> tags, only the <h1>,..., <h6> tags. Also notice that the six css rules creating the new tag versions are located in the page <head>.
Note that once we have included the css rules that "reconfigure" the <h1>,..., <h6> tags, then anytime we use the default version of one of these tags on this page the headings will be produced according to the specifications of these rules. (We can still override the new specifications on a case-by-case basis if we wish.)
Method 3:
Putting CSS Rules in an External File

Instead of putting css rules in the head of the page where we want new versions of tags to be used, we can place the css rules in a separate file and then refer to that "external" file on the page where we wish to use the new tag versions. (We call this an external file, because now the rules are placed outside the file containing the HTML that will be affected by the rules.)
One advantage of this approach is that we can refer to the file with the css rules on any number of HTML pages. This will allow us to apply a set of customized tags uniformly to a whole group of pages (even to an entire web site if we wish). In addition, if you later need to reconfigure your customized tags on a large number of pages, all you'll need to do is make the desired changes to the css rules in one place: just edit the rules in this external file. Then voilà, all your custom headings and/or other tags will be automatically updated on all of the HTML pages that refer to the external file.
The format of the external file is very simple: it's just a list of css rules for the tags that we want to define. If you wish, you can also include css comments to help you remember what the rules are for, how you may wish to use them, etc. In this external file the list of rules should not be enclosed in a <style> tag or in an HTML comment. In fact, you should not include any HTML tags in an external css file.
You can include a single line comment in a css file by preceding the comment with two forward slashes //. You can include multiline comments by putting /* at the beginning of the comment and */ at the end. If you use multiline comments, be careful to use the beginning and closing symbols in pairs. If you start a comment but forget to signal its end, things will probably not work as you'd intended.
You can give an external css file any name that's legal on the computer where the style sheet will be used. It's probably a good idea to add a .css extension to the file name; this will help you remember the purpose of the file. The .css extension is not required for the external style sheet files to work however.

Connecting an External CSS File to an HTML Page

In theory, there are two ways an HTML page can refer to an external file that contains css definitions: the HTML file can 1) link to the css file or 2) it can import the css file. In practice, however, import is not yet widely supported by existing browsers, so we won't say any more about it here.
Linking an HTML file to an external css file is extremely simple: you just need to include a <link> tag in the head of the HTML file. The <link> tag has three attributes, two of which are always the same (so you can think of them as part of the boilerplate for the tag). The third attribute gives the name of the external file being linked. For example, to link an HTML file to a set of css rules defined in a file named stylefile1.css, you'd use a link tag with these attributes:

rel=stylesheet (always the same)
type="text/css" (always the same; and optional)
href="stylefile1.css"
This page links to style file rules in an external file: Example 3. And here's the link tag the example HTML page contains:

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

In this case the external file stylefile1.css is in the same folder as the HTML file that is linking to it. If these files are in different folders, the value assigned to href should include not only the name of the css file but also its location (path) relative to the HTML file.

A Shortcut: Eliminating Repetition in Rules

You've probably noticed that in our above rules for the <h1>,... ,<h6> tags there is a lot of repetition. All of the tags are defined to use the same font face, weight, and color; the only differences in these rules are the font sizes. In cases like this we don't really need to repeat all the definitions that are the same in every rule. Instead we can use a single rule to set the common characterstics of several tags and then use additional rules for individual tags to specify only the ways in which we want the tags to differ. Here's a case in which we get the same results as before but with a more compact set of rules: Example 4. And here are these new more compact rules:

h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #cc3300} h1 {font-size: 24pt;} h2 {font-size: 18pt;} h3 {font-size: 16pt;} h4 {font-size: 14pt;} h5 {font-size: 12pt;} h6 {font-size: 10pt;}

Note that to have a set of tags be governed by the same rule we list all those tags, separated by commas, at the beginning of the rule, just outside the braces.