In this tutorial you will learn how to create a border above and below a title, add a continues gradient or image on the background and style the text with text-transfer and letter spacing.
MATERIALS
For this tutorial you will need a html document with a title/heading, and image and a blank CSS document. And you will have to open Dreamweaver to do this tutorial.
STAYLING THE HEADING
To style this heading, you will need a selector that targets the <hi> element
The html code used for this heading is
<html>
<h1>murder</h1>
</html>
ADDING COLOR, FONT SIZE, AND WEIGHT
To add a color to the heading, use the color property
CSS code setting font – size and font – weight
h1
{
color: #036;
font -size: 120%;
font-weight: normal;
}
SETTING TEXT OPTIONS
The next step is to center the heading, make it uppercase, and add some letter spacing. To accomplish the text-transform, text-align, and letter-spacing properties can be use.
CSS code transforming text
h1
{
color: #036;
font-size: 120%;
font-weight: normal;
text-transform: uppercase;
text-align: center;
letter-spacing: .5em;
}
APPLYING PADDING AND BORDERS
If the header requires borders that will be added to the top and bottom later on. A good way to avoid placing text hard against the borders is to use padding. The padding property settings are top and bottom padding to .4em and left and right padding to 0.
CSS code adding borders
h1
{
color: #036;
font-size: 120%;
font-weight: normal;
text-transform: uppercase;
text-align: center;
letter-spacing: .5em;
padding: .4em 0;
border-top: 1px solid #069;
border-bottom: 1px solid #69;
}
ADDING A BACKGROUND IMAGE
To add a background image to the heading, use the background property.
CSS code adding a background image
h1
{
color: #036;
font-size: 120%;
font-weight: normal;
text-transform: uppercase;
text-align: center;
letter-spacing: .5em;
padding: .4em 0;
border-top: 1px solid #069;
border-bottom: 1px solid #69;
background: url(ontheback.jpg) repeat-x;
}
In this lesson, you have learned how to style a flexible title using the commands font-size, font-weight, borders, padding and background images.
For more info about this subject look up styling a flexible heading on the internet good places to search for is Google and Linda.
No comments:
Post a Comment