Stylish Headings

The first element that we'll style is our level 1 headings, denoted by the h1 element. Let's add some rules to our CSS file to see what's possible when it comes to those headings. In your text editor, add the following to style1.css:

h1 {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

Save the CSS file and refresh your view of the homepage in your browser. Can you see what's changed? All the first-level headings now display in the Trebuchet MS font, while everything else displays in Verdana.

The font we've chosen is another sans-serif font, but it's different enough to provide plenty of contrast with the paragraphs, as Figure 3.6 illustrates.

Figure 3.6. h1 headings displaying in one font (Trebuchet MS) while other text displays in another (Verdana)

Some Font Names Deserve Quotes

In the example above, "Trebuchet MS" appeared in quotation marks. You don't need to bother wrapping quote marks around font names, unless the font comprises several words, such as 'Courier New' or 'Times New Roman.' A single-word font name, such as Arial or Verdana, does not need to be wrapped in double quotes.

Have a quick look around all three pages of the web site and you'll see that your new styles have been applied to all your web pages. Let's go a step (or two) further.

Note: What's Going On? Nothing's Changed!

If you try refreshing your browser's view of a page and nothing appears to change, first check that you saved the changes you made to the CSS file. If you have saved the altered file, check that you typed the CSS exactly as described. If you did, you may be experiencing a caching problem with your browser.

Web browsers "cache" some content. What this means is that, to save having to download files each and every time you visit a given web page, your browser uses versions of the files that it saved to the hard drive previously. This reduces the time it takes to display a web page that has been loaded once before. Unfortunately, your cache can get out of date, and when that happens, the page you visit (i.e. you enter the URL, and the browser pulls the page stored in its cache) might not display the most recent data.

This happens most frequently with images, but it can also occur with CSS files. The good news is that you have control over your browser's cache settings and the amount of space the cache takes up on your hard disk before previously cached content gets replaced with newer data. You can poke around your browser's settings for words like "Cache" or "Temporary Internet Files" to change these settings; however, most users opt to leave their caches to the default settings.

If you're positive that you've made the necessary changes to your CSS file (and saved them) correctly, you may need to "force-reload" the CSS file in your browser.

To stop the caching problem and force the browser to get the most up-to-date version of your CSS file, simply hold down the Shift key and click on the Refresh (or reload) icon on your browser's toolbar.

Share and Enjoy: