Chapter 11. Using Basic CSS To Add Style

In the last chapter, Ken used basic HTML tags to build his home page. So far, the page looks like this Click Here. It looks very plain. Ken would like it to look more professional. Ken plans to use CSS (cascading style sheets) to add some style. CSS is powerful, but Ken is only needs to use a basic subset of that power to give his page some style. Following is the various style characteristics that Ken wants to add:

• Make the page font family Georgia , the font color a dim gray (#696969), and the default font size 14 pixels
• Make the heading level 1 a maroon color (#800000), font size 20 pixels, and 10 pixels from the left margin
• Give paragraphs a left margin of 20 pixels
• Before a link is taken it has a light blue color (#487643), after a link is taken it turn orange (#ECBA5D), and when the reader hovers over a link it turns maroon (#800000)
• The tag line’s font size is 24 pixels, it is italic, and it is moved from the bottom of the table cell

The style definitions in the style.css style file look like this:

body {font-family:georgia, helvetica, arial; font-size:14px; color:#696969; background-color:#ffffff;}
h1 {font-size:20px; color:#800000; margin-left:10px;}
p {margin-left:20px;}
a:link {color:#4876A3;}
a:active {color:#000000;}
a:visited {color:#ECBA5D;}
a:hover {color:#800000;}
.background1 {background-color:#800000; line-height:30px; color:#ffffff; text-align:center;}
.background2 {background-color:#F8F7F5;}
.tagline {font-size:24px; font-style:italic; margin-bottom:50px;}
.mainnav {margin-bottom:10px;}

Using the CSS styles, the page now looks like this Click Here. The page has a nice, clean appearance and it looks nicer that the plain HTML version.