Stylizing the heading using font and border

Font property

font-style

font-variant

font-weight

font-size/line-height

font-family

The first three values can be placed in any order, while the others need to be in the order.

When you want to include the line-height value, put a forward slash between the font-size value and the line-height value.

p

{

font:1em/1.5em verdana, arial, sans-serif;

}

When setting style heading, remember that browsers have their own default values for padding and margins of paragraphs and heading tags.

-Use border-top and border-bottom properties when setting the style for the heading.

h2

{

font:bold italic 2em Gerorgia, Times, "Times New Roman", serif;

border-bottom:2px dashed black;

border-top:10px solid black;

margin:0;

padding:0.5em 0 0.5em 0;

font-size:1em;

}

p

{

margin:0;

padding :10px 0 0 0;

}

when setting borders, make sure to adjust the padding to put enough whitespace between the borders and the text of the heading. This aids to readability.

For styling Heading with text and image

p

{

font:bold italic 2em Gerorgia, Times, "Times New Roman", serif;

background-image:url(tall_grass.jpg);

background-repeat:repeat-x;

background-position:bottom;

border-bottom:10px solid black;

margin:0;

padding:0.5em 0 60px 0;

}