 |
Heading tags are often set up to host styles to unify a site. While a site may have all the text in black, if all the titles on the site were say blue or red, there would be unity in the page look by text size and color.
- open and save this doc, myHTML to your hard drive in the directory that your css sheet is in.
1. Our CSS sheet at this point should look like this:
Open your my.html document that you downloaded above. Text has been added with the following tags: heading 2, heading 3, heading 4, and paragraphs for a later lesson.
2. To set up a style for the heading tags we need to specify the heading we want to change. To set up the style for the heading2 tag, Type in the following:
h2{
}
3. The h2 is called an element, just like the body in the previous styles. Each element responds to numerous styles. Lets add color. To add color, type in the word colr followed be the colon. Specify the color as #hex or the accepted html name. End the command with a semicolon ;.
H2 {
color: red;
}
Save your style sheet and refresh your my.html page. Try a few other colors including gray, blue, navy, yellow, lime.
4. Normal H2 tag has a set font size similar to about an 18 pt bold. Let’s change it to 40 pt.
H2 {
color: lime;
font-size: 40pt;
}
Save and refresh your browser. Font size can be in pixel too. Change the pt to px, save and refresh! Try 60 px.
5. Text Alignment: To set the alignment of your h2 tag to something other then default, you use the
text-align: style. This can be set to center, left, right, or justify. Set it to center.
H2 {
color: lime;
font-size: 60 px;
text-align: center;
}
6. Set the font family style by including font-family: within the h2 element tags on the CSS sheet. This can simply be serif, sans-serif, cursive, fantasy, or monospace, or you can select the exact font such as Arial.
font-family: fantasy;
font-family: Times New Roman;
font-family: Verdana;
font-family: Comic Sans MS;
font-family: Arial;
Try a few different font-family settings and leave it on sans-serif..
You can set the background color and background-image much like the body styles. Try these two:
background-color: black;
background-image: url(http://www.developingwebs.net/animatedmatrixtexture.gif);
7. To set up a style for the <h3> tag on your HTML document, type in the element, h3, as a new section on your CSS sheet.
H3 {
color: lime;
}
Use the information above to color, align, size, etc, all the h3 tags. Then try the H4 tags.
Once your done with this, It is time to move on to the paragraph tags in the next section.