Next, we introduced a new rule, this time for the h1 element (the main heading on our web pages, which displays the site name) and, once again, used a font-size property to specify the size of the text (extra large is the answer!).

Example 3.8. style1.css (excerpt)
 
h1 {
  font-size: x-large;
}

The h2 element also gets a minor makeover:

Example 3.9. style1.css (excerpt)
 
h2 {
  color: blue;
  font-size: medium;
  font-weight: normal;
}

Browsers usually display headings in bold type, but we can have them display in standard type by giving the font-weight property a value of normal.

A Beginner's Palette of Styling Options

We've looked at some examples of styles that can be applied to your web pages through CSS, but the examples we've seen have been a mixed bag (deliberately so). There are so many more from which you can pick and choose -- too many possibilities, in fact, for us to be able to list them all here. However, this section lists some of the basic properties and values with which you might like to experiment. Feel free to try any of these in your CSS file. Note that we'll be adding to this list in subsequent chapters; it's by no means exhaustive!

   
• color, background-color -- As we've seen, both of these properties can take color keywords (e.g. red, blue, green, or yellow) or hexadecimal color specifications such as #ff0000.
   
• font-family -- This property takes a list of fonts, containing any fonts you choose in order of preference. Be sure to provide options that users are likely to have on their computers (e.g. Arial, Verdana, etc.). This list should end with one of the "generic" CSS fonts such as serif or sans-serif, which any browser that supports CSS will recognize.
   
• font-size -- This property can be any one of the following:
     
  • font size keywords
     
  • xx-small
     
  • x-small
     
  • small
     
  • medium
     
  • large
     
  • x-large
     
  • xx-large

     

  • a relative unit
     
  • such as a percentage (e.g. 140%)

     

  • fixed font sizes
     
  • pixels (e.g. 20px)
     
  • points (e.g. 12pt, as you may be used to using in Microsoft Word)
  Fixed font sizes are not always a great idea, as they cannot easily be scaled up or down to suit the reader's needs. Relative font sizes are definitely the preferred option.

     

  • font-weight
  
  
     
  • bold or normal

     

  • font-style
  
  
     
  • normal or italic

     

  • text-decoration
  
  
     
  • none, underline, overline, or line-through
  
  

  Share and Enjoy: