|
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. |
