Path = Home > Using CSS > Using CSS - The H1 Tag

Using CSS - The H1 Tag

To make large text such as titles on your web page you can use the H1 tag.

Here is an example using normal HTML.

The basic code is :-

<h1>Sample Text</h1>

and this will give you large text in the color of your current text (note that you need a closing tag).

Sample Text

Using CSS you can modify the H1 tag to make it more useful

h1 {
}

you can change the font

h1 {
font-family: "Courier New", Courier, mono;
}

Sample Text

You can make the text more interesting by adding color

h1 {
color: #CC0000;
font-family: "Courier New", Courier, mono;
}

Sample Text

next you can change the style of the text

make bold

h1 {
color: #CC0000;
font-weight: bold;
font-family: "Courier New", Courier, mono;
}

Sample Text

make italic

h1 {
color: #CC0000;
font: "Courier New", Courier, mono;
font-style: italic;
}

Sample Text

underline

h1 {
color: #CC0000;
font: bold "Courier New", Courier, mono;
font-style: italic;
text-decoration: underline;
}

Sample Text

and change the height of the text

h1 {
color: #CC0000;
font-weight: bold;
font: bold 24px "Courier New", Courier, mono;
font-style: italic;
text-decoration: underline;
}

Sample Text

These examples all use the H1 tag, but you can do exactly the same using the H2, H3, H4, H5 and H6 tags.