Starting to Build our Style Sheet

The style sheet is ready to be used: it's saved in the right location, and all of your web pages (all three -- count 'em!) are linked to it correctly. All we need to do, then, is set some styles!

One of the first changes that people often make to a web site's default styling is to alter the font (or typeface) that's used. On Windows, most browsers will opt for Times New Roman -- the font that has been used in all the screen shots we've seen so far. For many people, though, it's a little bit dull, probably because this font is used more than any other. It's very easy to change fonts using CSS's font-family property. The best place to use this is within the body element, as shown below.

Example 3.3. style1.css
 
/*
CSS for Bubble Under site
*/
 
body {
  font-family: Verdana;
}

Here, I've chosen to use the Verdana font. It's applied to the body element because body contains every element that you will see on the web page. The nature of the way in which CSS is applied means that every element contained in the body element will take on the same font (unless another font is specified for a given element or elements within body -- but more on that a little later).

Great: Verdana it is! But ... what if some people who view your site don't have Verdana installed on their computers? Hmm, that's a tricky one. The short answer is that the browser will make its best guess about which font it should use instead, but we don't have to make the browser do all the guesswork. The font-family property allows us to enter multiple fonts in the order in which we'd prefer them to be used. So, we could type something like this:

body {
  font-family: Verdana, Helvetica, Arial, sans-serif;
}

This translates as: "Please style everything in the body of my web page so that the text appears as Verdana. Failing that, please try using Helvetica and, failing that, Arial. If none of the above are installed, just use whatever sans-serif font is available."

We'll use this selection of fonts in our diving site, so let's open the style sheet file and play around with some CSS.

   
• Type the above CSS into style1.css.
   
• Save the file, then open the homepage (index.html) in your browser.

If everything went to plan, your web page (all three of them, actually) should display slightly differently than they did before. Figure 3.4 shows the appearance of our newly-styled homepage.

Note: Sans-serif Fonts: Better for On-screen Viewing

A serif font is one that has all those fancy extensions and flourishes at the ends of each letter. These "flourishes," which are shown in Figure 3.5, are known as serifs. They're great for reading printed material, as they give a little shape to the words, making them easier to read.

However, on the screen, serif fonts can become a little messy, especially when they're used for smaller type -- there simply aren't enough pixels on the screen to do these little flourishes justice. For this reason, you'll notice that many web sites use sans-serif fonts (French words that literally mean "without serif") when the font size is set quite small.

Note that when you refer to a sans-serif font in CSS, you must hyphenate the two words, i.e. sans-serif.

Figure 3.4. A font change in the style sheet affects the body of our web pages

Figure 3.5. Highlighting the serifs of a serif font (Georgia)

Share and Enjoy: