After your boss sees the page, he comes to you and says, "you know, I think I want it the other way around, red titles and yellow site backgound. And while you're at it, make the main text purple. We need some more sparkle, and so on, and ...".
Once again, you edit the pages. It is enough work with only two pages. I assume that if you're working for a company or creating a site for a customer, then you likely have more than two pages to edit. Even if you're creating a site for yourself, start using CSS from the start, it will save many hours, if not days!
CSS is the answer to making your life easier. If you built your pages with CSS from the begining, then you only need to make those changes to ONE FILE!
Here's how to do it. See the new line in the listing below that is bold? That is the 'glue' that connects an external style sheet to your page Don't worry about the meaning of the line yet, we'll get to that later. Notice the color-specifications are missing, no more font-specifications. Did you also notice that the listings got shorter? This is another advantage of using CSS. The pages get smaller, leading to faster download times. Not bad, huh?
<head>
<title>Ugly Colors, Inc.</title>
<link href="styles/mine.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Ugly Colors R Us - Home Page</h1>
Hello there, welcome to the home of ugly colors!
</body>
</html>
<head>
<title>Ugly Colors, Inc.</title>
<link href="styles/mine.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Ugly Colors R Us - About Us</h1>
We are just a bunch of ugly color loving folks!
</body>
</html>
Here is the external CSS file, just take a quick look at this listing, then we'll finish this lesson on the next page with a bit closer look.
font-family:Arial, Helvetica, sans-serif;
color: purple;
font-size: 12px;
background-color:yellow;
}
h1 {
font-family:Arial, Helvetica, sans-serif;
color: red;
font-size: 16px;
}