How to Style a Heading with CSS

Give your headings some snap and pop with CSS styles.

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

8




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




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