All Freelance Work is a Community for Freelance Workers Including Free Portfolios, Job Search, Job Posting, Helpful Articles, Forums, & More for the Self Employed.
Home > Articles > Web Building > A QUICK GUIDE TO CASCADING STYLE SHEETS
A
QUICK GUIDE TO CASCADING STYLE SHEETS
Written
by Sean Paul Caillouette
http://www.seanpaulheather.com/
A cascading style sheet can be used to predetermine font styles or image styles and placements. In this article we will learn how to make a header, a body and triple rollover using cascading style sheets.
Lets start by writing the body style. Open your favorite text editor and type the following:
.body
{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #5B4A11;
line-height:24px;
}
You will note that the first line is the name of the style followed by a curly brace. Within the curly brace is the description for the style named "body." Don't forget to use a closing curly brace at the end of your style description. Font-family describes the font to be used. The monitor will try to include the first font, if that is not available it will move to the second, then the third until if finds an available font. All style descriptions close with a semicolon. Then there is the font size. We have set it at 9 pixels or 9 points. Then for the color we have chosen a hexadecimal number for dark brown. You can find hexadecimal numbers in any photo imaging program or you can buy a web book that describes hexadecimal numbers and colors. Then the line-height is the leading, or the spacing between the lines. We have chosen 24 pixels to give the body a more open feel.
Now lets define the header. Type in above or below the body description the following code:
.Header
{
font-family: Helvetica, Arial, Geneva, Swiss, SunSans-Regular
font-size: 20px;
color: # 9D8F9E;
font-weight: bold;
text-transform: uppercase;
}
Again, the same rules apply. We have not included a line height because theheader will only occupy one line. We have included "text-transform" to convert the text to uppercase. This will be appropriate for the title. The color is a smoky purple.
Next we will create a text button rollover. The text will highlight when a person places the cursor over the text, and the text will change color when it is pressed. This is called a triple roll-over
a.button
{
font-family: Veranda, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
color: #D1BA6A;
font-weight:
bold; font-size: 13px;
text-decoration: none;
}
a.button:hover
{
color: A18F9D;
font-family: Veranda, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
font-weight: bold;
font-size: 13px;
text-decoration: none;
}
a.button:active
{
color: #4DC750;
font-weight: bold;
font-size: 13px;
font-family: Veranda, Arial, Helvetica, SunSans-Regular;
text-decoration: none;
}
We include an "a." before the name of the text so that it works with the html "a href" command. We have included "text-decoration: none" to remove the underline that html places beneath hypertext links.
The buttons will be a dull orange that turn smoky purple when the cursor is placed over them, then they turn green when pressed. "Hover" is when the cursor is placed over the button. "Active" is for when the button is pressed. Notice that these three descriptions all have the same name, "button."
Now save the file as "style.css" in a folder named "stylesheet."
Next we will write the html to make the cascading style sheet work. Open a new document in your favorite text editor and write the following code.
<html>
<title> Cascading Style Sheet</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css" title="docProperties">
</head>
<body>
<p class="Header"> This is the Heading </p>
<p
class="body"> This is the body of the page.
I will type more so that it <br>
takes up several lines. The body is 11 point text, sans serif,
<br>
with 24 pt leading. This is the body text. It is a dark brown.
<br>
I hope you are learning a lot with this little exercise.</p><br>
<br>
<A HREF="index.html" class="button">link
one
<A HREF="index.html" class="button">
link two
<A HREF="index.html" class="button">
link three
</td></tr></table>
</body>
</html>
Now save this file as index.html in the same folder as the style.css document. Now open you favorite browser and open the index.html document. You should see the text laid out according to the style sheet specifications.
Trouble Shooting
If you are having problems getting the style sheet to work, make sure that you have straight quotes and not curly quotes in your html. I tried to cut and paste into my favorite text editor the above code, and I had curly quotes in my text editor. Curly quotes will not work, you need straight quotes.
The triple rollover will not work in Netscape browsers less than Netscape 6. They should work fine in Internet Explorer 5 and above.
To
see what the page should look like you can visit the following
url:
http://seanpaulheather.com/stylesheet/index.html
Written
by Sean Paul Caillouette
http://www.seanpaulheather.com/
504.279.6985
BlinkList | del.icio.us | Digg it | Furl | Netscape | Onlywire | RawSugar | reddit | Spurl | StumbleUpon | Yahoo MyWeb
