How to Style a Heading with CSS

Use CSS to add interest to your web page headings.

Give your headings some snap and pop with CSS styles.

Things You'll Need

• Basic HTML knowledge
• Basic CSS knwledge
• HTML editor
• A background image for the heading

Instructions

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. 

   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. 

   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. 

   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

1. 

   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;
   }

2. 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;
   }

3. 

   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

• CSS Tutorial