Creating a Linked Style SheetTo truly tap into the power of CSS, you'll be using linked style sheets the majority of the time. A linked style sheet is a separate text file into which you place all your CSS rules (but not any HTML) and is named using the .css suffix. You then link any HTML file you want to have affected by that style sheet to the sheet using the link element in the head portion of the document. Example 7-2 shows a style sheet ready for linking. In it, I've provided a range of style rules and then saved the file to my local folder, naming the file styles.css. Example 7-2. A style sheet ready for linkingbody { background-color: #999; color: black; } h1 { font-family: Verdana; font-size: 24px; color: #ccc; } p { font-family: Georgia; font-size: 12px; color: white; } In Example 7-3, you'll find the complete HTML along with the required link to the style sheet within the same directory. Example 7-3. The HTML for the style sheet
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<link rel="stylesheet" type="text/css" href="styles.css" media="all" />
</head>
<body>
<h1>Welcome!</h1>
<p>Paragraph one.</p>
<p>Paragraph two.</p>
</body>
</html>
The results can be seen in Figure 7-4. Figure 7-4. Results from a linked style sheet.Of course, you can link as many documents you want to this style sheet using the link element. You'll note several attributes in use with the link element, as follows:
As mentioned, you can link as many style sheets to the same document as you want. |