Keeping your Styles Separate
As was mentioned earlier, styles definitions don't belong in HTML or XHTML. Style definitions belong in external files called "style sheets". So let's do some minor surgery on the last page we created. The style information is colored in red below. This is what is going to be relocated to the external style sheet.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My first web page</title>
</head>
<body
style='font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;'>
<h1
style='color:blue;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:16px;'>
My First Webpage
</h1>
<p>
Hi everyone, how do you like my page?
</p>
<p>
This shows how easy it is to separate paragraphs.
</p>
</body>
</html>
Now we'll create the style sheet, then save the file as "mysite.css":
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
h1 {
color:blue;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
}
Now attach the style sheet to this the page (see the new text in green):
<!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">
<title>My first web page</title>
<link href="mysite.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>My First Webpage</h1>
<p>
Hi everyone, how do you like my page?
</p>
<p>
This shows how easy it is to separate paragraphs.
</p>
</body>
</html>
The difference between the two versions of the page should be clear. An important point about using external style sheets, other than keeping style and content separate, is the fact that your pages will be smaller and they will load faster. When you include the style sheet in each page, all of your <h1> tags will automatically have the style you specified, and the text within the body (that isn't within an <h1>) will also be styled accordingly.