Adding Styles to a Web Site: External

A major benefit of CSS is that you can create a style sheet once to use either on a single Web page or throughout an entire Web site. You can apply this external style sheet to one or a hundred HTML documents, without having to retype the information.

Establishing an external CSS file is a two-step process. First, you must set up the rules in a text file; then you need to link or import this file into an HTML document, using either the <link> tag or the @import rule (Figure 2.7).

Figure 2.7. External CSS files can be not only used in multiple HTML files, but also imported into (but not linked to) another external CSS file.

Creating an External Style Sheet

The first step in using an external style sheet globally on a Web site is to create the text file that holds all of the CSS code. However, unlike adding embedded styles, you do not use <style> tags in an external CSS file. This would prevent it from working in most browsers.

In this example, I set up three CSS files: default.css, ch01.css, and ch12.css.

To set up an external CSS file:

default.css

Create a new file, using word processing or other software that allows you to save the document as a text file. Notepad or SimpleText will do (Code 2.3). You can set up as many different CSS files as you want for your site, such as ch01.css and ch12.css (Code 2.4 and Code 2.5), and even link or import multiple style sheets to a single Web page.

Code 2.3. default.css: This external CSS contains declarations that will be used to create the layout in Code 2.6 and Code 2.7. It begins, though, by importing the external style sheet `ch01.html` (Code 2.4).

/* Default CSS used in all Chapters */ @import url(ch01.css); body {      font-size: 1em;      font-family: Georgia, 'Times New Roman', times, serif;      color: #000000;      margin: 8px; } h1 { font:small-caps bold italic 2.5em Georgia, 'Times New Roman', times, serif; color: red; } h2 {      color:#999; } #content {      position: relative;      top:   190px;      left:  165px;      width: 480px; } #content #copy {      line-height: 1.5; } p.authorName {      margin: 8px 0px;      font: bold 1em Arial, Helvetica, sans-serif; } h2 .chapterName {      display: block;      margin-bottom: 8px;      font-size: smaller;      color:black; } p.dropCap:first-letter {      font: 300%/100% serif;      color: #999999;}

Code 2.4. ch01.html: The majority of the styles applied to this HTML document are linked from the external CSS file called `default.css`, shown in Code 2.3. This code replaces the background image from Chapter 1.

/* Styles used in Chapter 1 */ body { background: white url(alice23.gif) no-repeat; }

Code 2.5. ch12.css: This code ads a background image from Chapter 12.

/* Styles used in Chapter 12 */ body { background: white url(alice40.gif) no-repeat; }

@import{ch01.css}

You can start any external style sheet by importing other external style sheets. However, if included, the import rule must be placed before all other CSS code. See "Importing a style sheet" later in this section for more details.

h1 {...}

Add CSS rules to the page by typing the selector to which you want to add styles, followed by opening and closing curly brackets ({}). The selector can be any of the following:

An HTML selector , such as h1 (see "(re)Defining an HTML Tag")
A class selector , such as .authorName (see "Defining Classes for Any Tag")
An ID selector , such as #content (see "Defining ID Selectors to Identify an Object")

Notice that you do not use the <style> tag here. Using that tag in this document will prevent the CSS from being applied to your Web page.

font:small-caps bold italic 2.5em Georgia, 'Times New Roman', times, serif; color: red;

In the brackets of your rule, type the declaration(s) to be assigned to this ruleformatted as property: valueusing a semicolon (;) and separating individual declarations in the list. You can also add one or more line breaks, spaces, or tabs after a declaration without interfering with the code to make it more readable.

Repeat Steps 3 and 4 for all the selectors you want to define. You can also add one or more line breaks, spaces, or tabs between rules without interfering with the code to make it more readable.

Name and save this document.

In this example, I named the file default.css. The extension .css is not required, and files will work without it, but this has become the informal convention for identifying CSS files.

You now need to connect this file to your Web page(s) using one of the two methods presented in the remaining part of this section of the book:

Link. Use the <link> tag to connect external CSS files to an HTML file.
Import. Use @import to connect external CSS files to an HTML file.

Tips

Although the external CSS file can have any name you want, it's a good idea to use a name that will remind you of what these styles are for. The name "navigation.css," for example, probably is a more helpful name than "657nm87gp.css."
A CSS file should not contain any HTML tags (especially not the <style> tag) or other content, with the exception of CSS comments and imported styles.
You do not have to use the .css extension with CSS files. You could just call this file "default," and it would work just as well. Adding the extension, however, can prevent confusion.

Linking to a Style Sheet

External style sheet files can be used with any HTML file through the <link> tag. Linking a CSS file affects the document in the same way as if the styles had been typed directly in the head of the document.

Figure 2.8 shows the general syntax for linking style sheets, while Figure 2.9 shows the results of linking to style sheet default.css (Code 2.3) from chapter01.html (Code 2.6).

Figure 2.8. The general syntax for linking to an external style sheet.

Figure 2.9. While this page may look exactly the same as Figures 2.4 and 2.6, the CSS used to create it is mostly located in external files that have been linked to it.

Code 2.6. chapter01.html: This file links to an external style sheet `default.css` (Code 2.3).

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Adding CSS to a Web Site</title> <link rel="style sheet" href="default.css" type="text/css" media="all" /> </head> <body> <div > <div>      <h1>Alice's Adventures in Wonderland</h1>      <p >Lewis Carroll</p>      <h2>Chapter I<br />         <span >Down the Rabbit-Hole</span></h2> </div> <div >      <p >Alice was beginning to get very tired of sitting by her sister on  the bank...</p> </div></div> </body></html>

To link to an external CSS file:

1.	<link Within the `<head>...</head>` of your HTML document, open your `<link>` tag and then type a space.
2.	rel="style sheet" Tell the browser that this will be a link to a style sheet.
3.	href="default.css" Specify the location, either global or local, of the CSS file to be used, where default.css is the full path and name (including extension) of your CSS document.
4.	type="text/css" Specify the type of information that is being linkedin this case a text file containing CSS.
5.	media="all" Specify the media type to which this style sheet should be applied. For more details, see "Setting Styles for Print and Other Media" later in this chapter.
6.	/> Close the `link` tag using a space, slash, and chevron (`/>`).
7.	Repeat Steps 1 through 6 to add as many style sheets to the page as you want.
8.	You can embed additional CSS rules in the head either before or after the links if needed (see the previous section, "Adding Styles to a Web Page").

Importing a Style Sheet

Another way to bring external style sheets into a document is to use the @import rule. The advantage of importing is that it can be used not only to put an external CSS file in an HTML document file, but also to import one external CSS file into another.

Figure 2.10 shows the general syntax for the @import rule, and Figure 2.11 shows the result of importing the default.css (Code 2.3) and ch12.css (Code 2.5) style sheets into the chapter12.html HTML file (Code 2.7).

Figure 2.10. The general syntax for importing an external style sheet.

Figure 2.11. The same CSS files were used to create this page that were used for Figure 2.9. This time, however, the files have been imported and a different background image has been defined for the body.

Code 2.7. chapter12.html: This file imports the external style sheets `default.css` (Code 2.3) and `ch12.css` (Code 2.5).