CSS Heading Properties

Heading Tags Info

 

The H1 and H2 Heading tags are more important, when used on your webpage, than ever before, all major search engines use the words placed between these tags as keywords for your page and therefore can be a big influence on your page rank.

Before Css Style Sheets came along the H1 tag was very big and couldn't be made to fit into your page theme, the H2 tag was slightly smaller and again looked awful. All that has changed now and the tags can be customised to blend into your page

It is a good idea to use the same text in the H1 tag that you have in the TITLE of your page and put it as near to the top as possible.

Below are a few basic examples just to get you started. Further down the page you will find some more advanced examples using background colours and even using a graphic as the background.

If you have not used CSS Style Sheets before, the code within the shaded areas has to be placed above the </HEAD> on your page.

Once you have created your styles, the heading tags are added to your page in the normal way without any further formatting.


Example CSS Headings

Below is the code to produce a standard H1 tag with font size 16 and the text colour in green as shown.

H1 Heading in Green

Next we will do a H2 tag in with a font size of 12 and a text colour in blue as shown

H2 Heading in Blue


<style type="text/css">
h1 {
font-size: 16px;
color: #006633;
font-weight: bold;
margin-top: 0px;
margin-bottom: 3px;
}
h2 {
font-size: 12px;
color: #3333FF;
font-weight: bold;
margin-top: 0px;
margin-bottom: 3px;
}
</style>

Advanced Heading Styles

We can go a little further now and give our Heading Tags a background colour to make them stand out more.

  H2 Tag with Black Background Colour 

I have used the H2 tag here just to show what it would look like, you can change it to H1 in your style sheet.

Adjust the right and left margin settings to size the background colour to fit the size of the text used and look as you want it to.


<style type="text/css">
h2 {
font-size: 16px;
color: #FFFF00;
background-color: #000000;
margin-right: 470px;
margin-left: 100px;
padding-top: 2px;
padding-left: 4px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
}
</style>

You can go one step further by adding a line underneath your Heading, just as I have with mine at the top of this page. In order to do this you will need to add the following to your css. Don't forget to adjust the margin settings to suit your page layout.


<style type="text/css">
font-size: 16px;
font-family: Arial, sans-serif;
color: #0000A0;
margin: 0px 20px 5px 20px;
padding-top: 20px;
font-weight: bold;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #0000A0;
padding-bottom: 2px;
padding-left: 0px;
</style>


Using Image as a Background

You can use an image as a background for your H1 and H2 tags, this is a little more complicated and I will go into the details at a later date, but for now the code is listed below if you would like to play around with it.

Once you have grasped the idea it is easy to create some good customised heading tags that blend in with your page layout.


<style type="text/css">
h1 {
margin: 0;
background-color: #ce530d;
color: #dfc07d;
font-size: 90%;
padding: 3px 5px 3px 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
background-repeat: repeat;
font-weight: bolder;
background-image: url(yourimage.gif);
font-family: Georgia, "Times New Roman", Times, serif;
}
</style>

You can now create your own custom css heading tag simply by following the above instructions.