Sample Web Designs

User submitted Webdesign Articles and Tutorials

Controlling header tags with CSS

By James Middleton - 23rd of March 2007

---

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: 25px; 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:

This is header 1

This is header 2

This is header 3

This is header 4