A Mixture of New Styles
Let's change the look of the site a little more: we'll add more styles to the body, and change the look of the navigation. Copy the CSS below into your style1.css file (or copy it from the book's code archive):
Example 3.4. style1.css
/*
CSS for Bubble Under site
*/
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #e2edff;
line-height: 125%;
padding: 15px;
}
h1 {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: x-large;
}
li {
font-size: small;
}
h2 {
color: blue;
font-size: medium;
font-weight: normal;
}
li {
font-size: small;
}
p {
font-size: small;
color: navy;
}
Save the CSS file, then click Reload in your browser. Hopefully, you'll be looking at a page like the one shown in Figure 3.7.
Figure 3.7. Applying subtle changes to the CSS that affects font display
A New Look in a Flash!
We've introduced quite a few new style declarations here. Let's examine a few of them in the order in which they appear in the CSS file.
Example 3.5. style1.css (excerpt)
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #e2edff;
padding: 15px;
line-height: 125%;
}
The background-color property can be applied to most elements on a web page, and there are many different ways in which you can specify the color itself. One is to use recognized color names such as navy, blue, red, yellow, and so on. These are easy to remember and spell, but you are limited somewhat by the range. Another way of referencing colors is to use a hexadecimal color specification. Yes, you're right: that does sound a little scary. I mean, just look at it:
background-color: #e2edff;
It's hardly intuitive, is it? This obscure-looking reference translates to a light shade of blue. You could not, as a beginner, begin to guess that this would be a light blue, but thankfully there are numerous tools on the Web that let you choose a color from a chart, then give you the code to match. Take a look at some of these tools (a good selection of links to color scheme tools is available at http://www.clagnut.com/blog/260/). and you'll soon be able to find the hexadecimal numbers you need to create your ideal color schemes.
Share and Enjoy:
