Information Technology Reference
In-Depth Information
</font>
</body>
</html>
Making modifications straight to the HTML is fine for small pages. However, imagine
how much time adding those font tags might take if there were 12 children and
countless pets to coordinate. Or perhaps you have multiple pages, one for each child
and you don't want them to feel left out if their sibling has nice color combinations and
they don't. Never fear-we can use something called a Cascading Style Sheet, or CSS, to
keep it all in check. Basically, a CSS file is a small document consisting of a set of styles
to be applied to an HTML document that can be changed at anytime, affecting every
page it is connected to, without ever having to edit the original HTML document(s).
Listing 1-4 provides an example CSS file.
Listing 1-4.
patriotic.css
body {background-color: blue}
h1 {color: white}
li {color: red}
Notice how the format of the file is simply the HTML tag you wish to edit (H1 for example
and the attributes you'd like to give it). In this case, we want the color of text within
h1
to
be white.We can simplify chores.html to include a link to this CSS file, as shown in the
code of Listing 1-5.
Listing 1-5.
chores.html with CSS reference
<html>
<head>
<title> Family Chore List </title>
<link rel="stylesheet" type="text/css" href="patriotic.css" />
</head>
<body>
<h1>Family Chore List</h1>
<ul>
<li><strong>Tommy</strong>: Take out the trash</li>
<li><strong>Beth</strong>: Clean out the fridge. </li>
<li><strong>Mittens</strong>: catch mice. </li>
</ul>
</body>
</html>
We'll get exactly the same output as is shown in Figure 1-4. Now, imagine how this
works if we scale upward. First of all, the parents no longer need to edit the HTML tags
directly to change styles. Depending on the holiday, they simply could have multiple
CSS files they could link to (simply changing the fourth line of the code in Listing 1-5).
Second, they could extend the CSS even further to specify spacing, fonts (Mittens hates
serifs), and more. Finally, if they have more than one page, they could simply link the
CSS sheet at the top of each page to their current “theme” and all the pages would look
alike. While the examples above are extremely simple, they illustrate the power of CSS.
We'll examine CSS inmore detail as we continue through the topic!
