Cascading Style Sheets (CSS)

Style Headings tags

Style your H1 - H6 tags

First we make a Style Sheet that inset the Heading tag background image.

div#heading_bgr_img_h1 {
    background-image:  url(vista_style_1.jpg);
    background-repeat: no-repeat;
    height: 29px;
    width: 400px;
}

<div id="heading_bgr_img_h1"></div>

Output of image:

Then we make our font for the H1 tag.

h1 {
    font-size: 12pt;
    color: White;
    font-weight: bold;
    font-family: "Verdana, Arial, Helvetica, sans-serif";
    padding-top: 5px;
    padding-bottom: 0px;
    margin: 0;
    text-align: center;
}


<div id="heading_bgr_img_h1">
      <h1>Heading 1 for your page...</h1>
</div>

This will give a H1 tag like this.

One more example, we use the H2 tag this time:


div#heading_bgr_img_h2 {
    background-image:  url(vista_style_2.jpg);
    background-repeat: no-repeat;
    height: 29px;
    width: 400px;
}

h2 {
    font-size: 12pt;
    color: #FFCC66;
    font-weight: bold;
    font-family: "Verdana, Arial, Helvetica, sans-serif";
    padding-top: 5px;
    padding-bottom: 0px;
    margin: 0;
    text-align: center;
}

This will give H2 tags like this:

<div id="heading_bgr_img_h2">
      <h2>Heading 2 for your page...</h2>
</div>

Important: Do not forget the margin: 0; syntax. That helps get our CSS code cross browser friendly.

No User Comments.

No User Comments, be the first one to write your comments?

Add your comments

	Your Name*:
	Your Email:
	Site URL:
	Site Name:
	Comemt Title*:
	Your Comment*:
	Key Phrase*:		6Uf
	Your IP Address:	38.103.63.62