Introduction
Header tags are incredible important in optimising your website for search engines. You should include all of your most prominent keywords and phrases within them, ensuring of course that the use of language is natural and intended for the human reader as well as the search engine.
I have always used <h1></h1> as the first and most important header on any page. However, from a design point of view, this tag is nearly always way too large and can look very ugly. This is where CSS can be used to control the appearance of headers.
Example code:
h1 { font-size: 25px; }
h2 { font-size: 23px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
Will output:
This is header 1
This is header 2
This is header 3
This is header 4
As you can see from the above CSS code, headers h1-h4 are set at descending font sizes. Now when I use headers within a page with this CSS installed, they are set at the sizes that I require.
Changing the colour of headers
Again, with CSS it is easy to control the appearance of headers. In the following example, I will control the colour of the headers.
Example code:
h1 { font-size: 25px; color: red }
h2 { font-size: 23px; color: green }
h3 { font-size: 20px; color: blue }
h4 { font-size: 18px; color: orange }
Will output:
This is header 1
This is header 2
This is header 3
This is header 4
Other useful controls
Let’s control the weight of the header font
Example code:
h1 { font-size: 28px; color: red; font-weight: bolder }
h2 { font-size: 23px; color: green; font-weight: lighter }
h3 { font-size: 20px; color: blue; font-weight: 900 }
h4 { font-size: 18px; color: orange; font-weight: 100 }
Will output:
This is header 1
This is header 2
This is header 3
This is header 4
How about grouping some of these characteristics together within the CSS to save you having to repeat code:
Example code:
h1, h2, h3, h4 { color: orangered; font-weight: lighter)
h1 { font-size: 25px }
h2 { font-size: 23px }
h3 { font-size: 20px}
h4 { font-size: 18px}
Will output:
