Style Sheets - Link Effects

To get your text links to rollover (mouseover, etc.), use the following style sheet code. Remember though, you can use just about any style properties, not just the ones in the example.

a:link { color: blue; text-decoration: underline }
a:visited { color: purple; text-decoration: underline }
a:hover { color: red; text-decoration: none }

Review

Although you have completed this tutorial, there are many other features in style sheets that you still don't know. You may want to check out some other resources. For now, I've provided a typical style sheet below that you may want to modify and use in the future. In case you don't remember, you can not only embed styles into your HTML, but you can link to an external style sheet that you can use for your entire Web site. Visit the Introduction if you forgot how.

a:link { color: rgb(150,1,82) }
a:visited { color: rgb(150,1,82) }
a:hover { color: rgb(145,145,145) }
body { background-color: rgb(255,255,255) }
h1 { font-size: 1.2em; color: rgb(150,1,82) }
h2 { font-size: 1.1em; color: rgb(150,1,82) }
p.small { font-size: .9em }

Practice

Return to Web Tutorials.

Introduction | Fonts | Color/Backgrounds | Review and Link Effects