Including Style Sheets in a Page | Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition)

Thus far, when I've discussed style sheets, I've always applied them using the style attribute of tags. For example, I've shown how you can modify the font for some text using tags such as <div> and <span>, or how you can modify the appearance of a list item by applying a style within an <li> tag. It might have occurred to you that applying styles this way doesn't really provide much of an advantage over using things like the <font> tag. If you rely on the style attribute of tags to apply CSS, if you want to embolden every paragraph on a page, you need to put style="font-weight: bold" in every <p> tag. This is no improvement over simply using <p><b> and </b></p> instead. Fortunately, CSS provides ways to apply styles generally to a page, or even to an entire website.

Creating Page-Level Styles

First, let's look at how we can apply styles to our page at the page level. Thus far, you've seen how styles are applied, but you haven't seen any style sheets. Here's what one looks like:

<style type="text/css"> h1 { font-size: x-large; font-weight: bold } h2 { font-size: large; font-weight: bold } </style>

The <style> tag should be included within the <head> tag on your page. The type attribute indicates the MIME type of the style sheet. text/css is the only value you'll use. The body of the style sheet consists of a series of rules. All rules follow the same structure:

selector { property1: value1; property2: value2; .. }

Each rule consists of a selector followed by a list of properties and values associated with those properties. All the properties being set for a selector are enclosed in curly braces, as shown in the example. You can include any number of properties for each selector, and they must be separated from one another using semicolons. You can also include a semicolon following the last property/value pair in the rule, or notit's up to you.

You should already be quite familiar with CSS properties and values because that's what you use in the style attribute of tags. Selectors are something new. I'll discuss selectors in detail in a bit. The ones I've used thus far have the same names as tags. If you use h1 as a selector, the rule will apply to any <h1> tags on the page. By the same token, if you use p as your selector, it will apply to <p> tags.

Creating Sitewide Style Sheets

You can't capture the real efficiency of style sheets until you start creating sitewide style sheets. You can store all of your style information in a file and include it without resorting to any server trickery (which I'll discuss in Lesson 19, "Taking Advantage of the Server"). A CSS file is basically just the body of a <style> tag. To turn the style sheet from the previous section into a separate file, you could just save the following to a file called style.css:

h1 { font-size: x-large; font-weight: bold } h2 { font-size: large; font-weight: bold }

In truth, the extension of the file is irrelevant, but the extension .css is the de facto standard for style sheets, so you should probably use it. Once you've created the style sheet file, you can include it in your page using the <link> tag, like this:

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

The type attribute is the same as that of the <style> tag. The href tag is the same as that of the <a> tag. It can be a relative URL, an absolute URL, or even a fully qualified URL that points to a different server. As long as the browser can fetch the file, any URL will work. This means that you can just as easily use other people's style sheets as your own, but you probably shouldn't.

There's another attribute of the link tag as well: media. This enables you to specify different style sheets for different display mediums. For example, you can specify one for print, another for screen display, and others for things like aural browsers for use with screen readers. Not all browsers support the different media types, but if your style sheet is specific to a particular medium, you should include it. The options are screen, print, projection, aural, braille, tty, tv, and all.

You can also specify titles for your style sheets using the title attribute, as well as alternative style sheets by setting the rel attribute to "alternative style sheet". Theoretically, this means that you could specify multiple style sheets for your page (with the one set to rel="stylesheet" as the preferred style sheet). The browser would then enable the user to select from among them based on the title you provide. Unfortunately, none of the major browsers support this behavior.

As it is, you can include links to multiple style sheets in your pages, and all the rules will be applied. This means that you can create one general style sheet for your entire site, and then another specific to a page or to a section of the site as well.

As you can see, the capability to link to external style sheets provides you with a powerful means for managing the look and feel of your site. Once you've set up a sitewide style sheet that sets up the basic look-and-feel parameters for your pages, changing things such as the headline font and background color for your pages or other such settings becomes trivial. Before CSS, making these kinds of changes required a lot of manual labor or a facility with tools that had search and replace functionality for multiple files. Now it requires quick edits to a single linked style sheet.