How to Style a Heading with CSS

Give your headings some snap and pop with CSS styles.

Difficulty: Moderately Challenging

Instructions

Things You'll Need:

• A background image for the heading

Use Font, Border, and Padding CSS Rules

1. First, determine which properties you want to apply to the font.
   
   Possible font properties you can style are:
   * Font-family (for example, Tahoma, Arial, or Helvetica)
   * Font-style (which includes italic and oblique)
   * Font-variant (which includes normal and small caps)
   * Font-weight (either normal or bold)
   * Font-size (size can be given in pixels, ems, percentages or using keywords such as small, medium and large)

2. 
   An h1 heading with the font-family and font-size rules in the example.

   A possible CSS rule for an h1 heading might be:
   
   h1 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: large;
   }

3. Decide if you want to have a border for your heading. The possible border style properties are:
   * None
   * Dotted
   * Dashed
   * Solid
   * Double
   * Groove
   * Ridge

4. Possible border-width values include keywords such as thin, medium and thick or a value given in pixels, ems or percentages.
   
   A border-color value should also be specified. Choose any color you want.

5. 
   The new border rule looks like this.

   Here's the h1 rule with some border styles added:
   
   h1 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: large;
   border-size: thin;
   border-style: dotted
   border-color: red;
   width: 400px;
   }

6. Padding can be added using a value in pixels, ems or percentages. Like borders, padding can be added individually to any side of a heading.

7. 
   Some padding at the top and left of the heading.

   Here's a possible rule adding padding to the h1 style example:
   
   h1 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: large;
   border: thin dotted #FF0000;
   padding-top: 10px;
   padding-right: 0px;
   padding-bottom: 0px;
   padding-left: 10px;
   }

Use Background Color or Background Image Rules

8. 
   The heading now has a background color

   Any element can have a background-color. To apply a background color to the h1 example heading, use a rule like this:
   
   h1 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: large;
   border: thin dotted #FF0000;
   padding-top: 10px;
   padding-right: 0px;
   padding-bottom: 0px;
   padding-left: 10px;
   background-color: #CCFFFF;
   }

9. Instead of, or in addition to, a background color, an image can be used as a background for a heading. Here is how the rule would look with a background-image added:
   
   h1 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: large;
   border: thin dotted #FF0000;
   padding-top: 10px;
   padding-right: 0px;
   padding-bottom: 0px;
   padding-left: 10px;
   background-color: #CCFFFF;
   background-image: url(bgimage.jpg);
   background-repeat: no-repeat;
   }

10. 
    The heading has an image as a background.

    Now the mottled background image can be seen behind the h1.

Tips & Warnings

• You can use CSS to replace the text from a heading with an image. Learn more about ways to do this using the link in the Resources section.
• Flash images can be substituted for headings. Learn more about how to do this using the link in the Resources section.
• It's a good practice to use a background-color, even when using a background-image. In case the image fails to download, the heading will still stand out from its background.

Resources

• Mezzoblue: Image Replacement
• Adobe: Flash Image Replacement

Who Can Help Sponsored

• How To Make Big Money With Low-Budget Postcard Projects. PostcardProfits.com