Use Your Head (ings) - Tutorial
Back to FAQ Home | Back
to Tutorial Home
Note: All External links will open in the same window and
are preceded by an asterisk. To open links in a new window right click the
link and then select "open in new window" from the floating menu.
Step 1
Step 2
Step 3
In this tutorial we are going to construct a page layout using only the heading
tags (h1 - h6). By careful planning and judicious use of
the heading tags you can almost format your whole page. This will make it
easier to maintain and easier to keep consistent throughout your site. As
with the other tutorials I will not be including hacks for older browsers
as that will complicate the issue at this stage and also spoil the cleanliness
of the code.
The code however is quite straight-forward and should be viewable on most
browsers. Before we start take a look at the page without
formatting and then take a look at the finished
page to get some idea of what we will be trying to achieve in this tutorial.
(Yes I know it won't win any awards but it's fine for this tutorial.)
Step 1
Note: One thing to to remember is that you should use headings
that make semantic sense. That is you should start with H1
heading and the next heading encountered should be H2 and
then H3 and so on.
Structuring your document in this way ensure that other types of browsers
(screen readers etc) will understand the layout of your page better. Don't
start with an H3 heading then use and H1 heading as this will not make much
sense. However for the sake of the tutorial I have bent the rules a little
bit in order to show how you can define headings.
Anyway here is the basic unformatted page for you to use. Highlight the code
below with the mouse then copy and paste it into your editor.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<title>Headings Tutorial</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
</head>
<body>
<h1><a href="index.htm">Back to Tutorial</a></h1>
<h1>This is A Main Heading (H1)</h1>
<h2>This is the sub Heading (H2)</h2>
<p>This is the main text, it is not meant to be read it is here just
for example
and to take up space. This is the main text, it is not meant to be read it
is
here just for example and to take up space. This is the main text, it is not
meant to be read it is here just for example and to take up space. This is
the
main text, it is not meant to be read it is here just for example and to take
up space. </p>
<h3>This is an Intermediate heading (H3)</h3>
<p>This is the main text, it is not meant to be read it is here just
for example
and to take up space. This is the main text, it is not meant to be read it
is
here just for example and to take up space. This is the main text, it is not
meant to be read it is here just for example and to take up space. This is
the
main text, it is not meant to be read it is here just for example and to take
up space. This is the main text, it is not meant to be read it is here just
for example and to take up space. </p>
<p>This is text that has been formatted using (h4) to break up the page
and add
impact and style. This is text that has been formatted using (h4) to break
up
the page and add impact and style. This is text that has been formatted using
(h4) to break up the page and add impact and style. </p>
<p>This is the main text, it is not meant to be read it is here just
for example
and to take up space. This is the main text, it is not meant to be read it
is
here just for example and to take up space. This is the main text, it is not
meant to be read it is here just for example and to take up space. This is
the
main text, it is not meant to be read it is here just for example and to take
up space. This is the main text, it is not meant to be read it is here just
for example and to take up space. </p>
<h2>This is the sub Heading (H2)</h2>
<h1> </h1>
</body>
</html>
Ok, the first thing we we need to decide on is what we are going to use the
heading for?
e.g.
h1 - Used for Main Headings
h2 - Used for Sub Headings
h3 - Intermediate Headings
h4 - Normal text size but using bordered text
to separate the content
h5 - Used for text that is smaller than
normal content
h6 - Used for Emphasized text
Now that we've decided on the format the next thing we must do is define
our default styles for the body.
We need to set the default text size and colours and the default background
colour. We're also going to take out the margin around the browser window
"using margin: 0px; padding: 0px;" which will work
for the main compliant browsers.
margin: 0px;
padding: 0px;
By default all browser give the viewing window an automatic border around
the page. In some cases it is nice to remove the border and this is done by
using the code above. Padding is set to 0 as well because Opera uses this
at it's border instead of margin. So by including both we cover both eventualities.
Copy the following code into the head of your document. (If you're not sure
how to set up your page then visit *this tutorial
to learn how to set your basic page up. There is also a short description
*here of why and where to place your css
if you're not sure.)
body defaults:
<style type="text/css" media="screen">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
color: #000000;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
}
-->
</style>
One thing to note is that if you set your stylesheet to media="screen"
then the printed version of the page will not use any of the css formatting
and can sometimes be the only thing you need to do in order to arrange your
page for printing. See the tutorial on *printing
with css for more information.
We have set the font size to small to enable users to adjust the size with
their browsers controls. If we had used pixels then some browsers would be
unable to change the size.
We have also supplied more than one font name just in case the browser doesn't
have the first named font installed as it will then default to the next in
line and so on until the end. At the end of the font list we have included
a generic font (sans-serif) that all browsers should have and will be able
to display correctly.
The text has been set to standard black and the background set to white.
Note that it is good practice to always define a foreground colour and a background
colour together. Due to the cascading nature of CSS you may inadvertently
set text to the same colour as the background colour which will mean that
it is invisible, but if you specify both at the same time you can be sure
what colours are going to be displayed.
Next we define the headings.
h1 - h4 heading tags
Step 2
In this section we will define the heading tags h1 - h4.
h1 - Set to 200% default size (as set in the body tag)
h2 - Set to 150%
h3 - Set to 120%
h4 - Set to 100% (same size as normal text)
Copy the following code and add it to your stylesheet:
h1 {
font-size: 200%;
color: #6FACD0;
background-color: #D8D6F3;
text-align: center;
}
h2 {
color: #0000FF;
background-color: #ABBFD6;
font-size: 150%;
}
h3 {
font-size: 120%;
font-weight: bold;
color: #666666;
background-color: #FFFFCC;
border-top: thin solid #000000;
border-bottom: thin solid #000000;
}
h4 {
font-size: 100%;
color: #000000;
background-color: #E6E6E6;
padding: 5px;
height: auto;
width: 50%;
border: thin solid #FF0000;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 25%;
}
As well as the sizes of the headings, we have also set colours and borders
to suit. Most of the settings are explanatory and do not need much explanation.
The heading h3 has had top and bottom borders set to give
the page some style. This is simply accomplished with the following code:
(code from h3 tag above)
border-top: thin solid #000000;
border-bottom: thin solid #000000;
This gives the h3 tag a thin top and bottom solid border
in black.
The settings for the h4 tag are a little more complicated
so I will explain them a little more. The sizes, colours and borders have
been set in the usual manner but this time we have given the tag a padding
all around of 5px and a margin of 5px on the top and bottom. This means that
the heading will have a 5px padding from its content (on all sides) and also
a 5px margin on the top and bottom away from other content on the page.
The width of the heading has been set to 50% of the available browser window
size and has the background coloured (background-color: #E6E6E6;) and a border
added (border: thin solid #FF0000;). The margin left has been set to 25% which
will place the heading 25% away from content on it's left, which in this case
is the browsers edge. This will effectively centre the heading in our page.
You may remember (if you have visited the *FAQ section)
that the usual way to center divs is simply to set the right and left margins
to auto and let the browsers do the work. You could use the same idea for
the heading but remember that IE5 and (IE6 in quirks mode) has a bug that
stops this working and a hack needs to be employed to rectify this. (I won't
explain the hack as it can be found *here in the
faq section.)
Anyway we don't need this hack because our heading is 50% wide and we have
set the left margin to 25% (50+25+25=100% ) and give a take or pixel or two
the heading will be centred without resorting to hacks.
Lets look at our page
so far.
It's starting to take shape now so let's define a couple of more headings
and then tidy the page up a bit.
h5 - h6 heading tags
Step 3
Ok now copy the code below on to the end of your stylesheet.
h5 {
color: #FF0000;
background-color: #EEEEEE;
font-size: 80%;
text-align: center;
}
h6 {
font-size: 80%;
color: #000000;
background-color: #FFFFFF;
}
By now you should be familiar with the format. All we have done here is to
set the h5 heading foreground and background colours, set
the size to 80% of the default and have centred the text.
The h6 heading has been set to 80% but has not been centred. To see the effect
of the changes have a look at the page so far.
The next thing we are going to do is to get rid of the gap between the h1
heading and the following h2 heading. To do this we need
to set the default bottom margin of the h1 tag to 0px.
This has cut down the space by half between the tags but can you guess how
we can get them closer together. The answer is quite obvious we need to change
the default top border of the h2 heading tag to 0px as well.
Now when you check your page you will see that there is no gap between the
h1 and h2 headings. Bear in mind that if
you use the headings in a different context they will still hold these settings
which you will have to allow for or even set up different classes of headings.
However, for our example it works fine as it is.
Nearly finished Now!
To show you how everything fits and resizes together because we have used
percentages, try changing the default size in the body styles from small to
x-small like this:
font-size: x-small;
If you check your page in the browser you will see that everything has scaled
together and is still in proportion. This means that whatever size screen
or resolution your viewer uses your layout will remain consistent.
Now we're just going to add a bit more formatting to tidy up.
This code will add some pretty borders to the h1 heading
tag and make it look a bit more interesting. Copy the code below and replace
your original h1 style definitions.
h1 {
font-size: 200%;
color: #6FACD0;
background-color: #D8D6F3;
text-align: center;
margin-bottom: 0px;
border-top-width: medium;
border-top-style: double;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
border-bottom-width: medium;
border-bottom-style: double;
}
These are just some border styles and colours to jazz it up a bit and should
be self explanatory by now.
We'll do a similar thing to the h2 heading so again copy
this code and replace your existing h2 heading styles.
h2 {
color: #0000FF;
background-color: #ABBFD6;
font-size: 150%;
margin-top: 0px;
border-top-width: medium;
border-bottom-width: medium;
border-top-style: double;
border-bottom-style: double;
border-top-color: #000000;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
}
Again all we have done is to play around with the border properties. Border-top-style:double
gives us a nice double border. There are many other properties you can choose
for your borders and are worth playing around with to see their effect (seems
like a cue for another tutorial). For now some of the other properties you
can use to play around with are as follows:
none
dotted
dashed
solid
double
groove
ridge
outset
inset
Next we will centre the h3 heading by adding the following
code to the h3 tag.
text-align: center;
Finally copy and replace the h6 tag with the code below.
Again all this does is to add some borders and colours to the proceedings.
h6 {
font-size: 80%;
color: #000000;
background-color: #FFFFFF;
border-top-width: medium;
border-top-style: double;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
If you look at your page you will notice that all our paragraphs are close
to the browsers window edge. To cure this problem we will simply indent the
paragraphs by giving them a small amount of padding.
Add this code to the bottom of your stylesheet.
p {
padding: 5px 5px 5px 10px;
}
This adds 5px padding to the top, right and bottom of the paragraph tag (P).
10px is added to the left to provide a better indenting effect. In shorthand
as above the dimensions are in the order Top, Right, Bottom, Left.
e.g.
padding: top right bottom left
To make it easier to remember the order use the letters TRBL
and make up a word that you can remember from those letters. e.g. The
TRouBLe with remembering padding order is not any
TRouBLe any more. (I'm sure you can think
of something better.)
Well that's about it.........just take a final look at the finished
page and remind yourself of how it was accomplished. Look at the mark-up
and notice how clean it is. Not a font tag in sight. The mark-up is almost
as clean as the text itself and is so much easier to manage.
If you want you can put the stylesheet in an external stylesheet and then
you can use the styles all throughout your site to remain consistent. If you
don't know how to do this there are some directions in the *faq
section.
I know the page we've created is very simple but if you experiment with it
you can make some very good looking pages with minimum effort. I'll leave
you now to head off into the sun set.......
