Including Style Sheets in a Page
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.
It’s not required in HTML5, and most designers leave it out. The body of the style sheet consists of a series of rules. All rules have 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 not, but best practices recommend that you do.
You should already be familiar with CSS properties and values because that’s what you use in the style attribute of tags. Selectors are something new. I discuss them 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 in your Web pages using an HTML tag. A CSS file contains 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 styles.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. After you’ve created the style sheet file, you can include it in your page using the <link> tag, like this:
<link rel=”stylesheet” href=”styles.css” type=”text/css” >
The type attribute is the same as that of the <style> tag and is not required in HTML5. The href attribute 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.
There’s another attribute of the link tag, too: 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 , embossed , handheld 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. You can use JavaScript to select from the different style sheets.
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, too. 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. After you’ve set up a sitewide style sheet that defines the styles for your pages, changing things such as the headline font and background color for your pages all at once is 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 .
