Liven up your Web pages with HTML style sheets

Does your Web site need a little excitement? Spruce up your dull Web pages with HTML style sheets. Use these quick and easy tips, and you'll have a great looking Web page in no time.

If you read my previous article on beating the hyperlink blues, then you have already begun to think about the many styles you can create for your Web pages. Today, I will introduce an HTML goody that will make the possibilities endless—style sheets.

What is a style sheet?
A style sheet is a section of code that gets placed between the HEAD and BODY sections of your document. It can be used for many handy-dandy tasks, but for now, we will focus on using a style sheet to spruce up your hyperlinks a bit.

Take a look at the code below:
 A:link { text-decoration : none;}
 A:visited { text-decoration : none;}
 A:hover { text-decoration : underline;}

This is a simple style sheet that enables your links to display a pretty interesting effect. The links will only be blue text until the mouse hovers over them, then the links will be underlined. It’s almost like a mouse-over in JavaScript, except you aren’t replacing an image with another image. You are merely telling the browser that the text style should differ depending on whether the link has been visited, the link has not been visited, or the mouse is hovering over the link.

The next step
You can take this one step further. Let’s say that you want the entire font of the link to change when the mouse is hovering over it. You can use the following code instead.
 A:link { text-decoration : none;}
 A:visited { text-decoration : none;}
 A:hover { font-family : "Verdana", "Arial";}

You can even change the font color
A:hover { color : red;}

or the font size
using A:hover { font-size : 20;}

when the mouse hovers over the link.

You can even make the link turn bold if you want, like so:
A:hover { font-weight : bold;}

If you would like the links to appear differently after they have been visited, alter the “A:visited” section of the style sheet. The same goes for the non-visited links.

A few words of advice
Spacing is very important in the style sheet. The spaces that appear before the words text-decoration, font-family, and so on are crucial, and the style sheet will not function properly without them. The same goes for the spaces before and after the colon. If you copy these snippets of code into your own HTML document, please be sure to copy verbatim the entire style sheet including these ever important spaces.
We love your feedback and use your comments and suggestions to bring you content you want. Send us an e-mail and let us know how we’re doing.

Editor's Picks

Free Newsletters, In your Inbox