Cascading Style Sheets

Cascading Style Sheets - Hyperlinks

Section 1 - Introduction
Section 2 - Basics
Section 3 - Next Level
Section 4 - Advanced
      Fancy Lists
      Forms
      Advanced Tables
      Frames
      Style Sheets
         Type and possibilities
         Background
         Text, Dimension
         Font
         Border
         Padding, list
         Classification
         Positioning
         Hyperlinks
         Misc.
         Multiple CSS
         You try it
      Image Maps
Section 5 - Publishing
Section 6 - Extras
Appendices

Finally, you've gotten to what I consider the most useful thing to do with CSS. In this lesson, you will learn to modify links to appear the way you'd like them to look. Here are some examples. None of them lead anywhere, so please click...

Normal Link, no CSS	Color Modified
Size Modified	Background Changed
Change of Font	Decoration Modified

Of course, you can combine these features, but try not to make your page annoying. Let's start with color.

Modifying color
One of the most popular uses of CSS is changing the color of links on a page. While this can be done in the body tag, it may be useful to have different colors or styles of links on one page. Like all CSS, you'll need code in both the head and code in the body of the page.

Here's the code in the head to change the color of the links:

And in the text

And you see:

Text goes here

Pay attention to the order of the for commands. Link must come before visited, visited before hover and so forth. Changing the order of these will cause the CSS code to malfunction. Once you're familiar with the structure of CSS codes for links, the rest of this will be easy.

Font Size
As shown in the "Size Modified" example,you can make text larger or smaller when putting the mouse over or clicking on a link. Warning: this is annoying if the whole page jumps around when you use a link. Make sure you use this carefully.

And in the text

And you see:

Text goes here

The first thing I want you to notice is the sizes specified. Under the link and visites tags, there was no size, so the default text size was used. When you move your mouse over the link (hover), the text jumps to 200% of normal, and if you click on the link, it balloons to 400% of normal.

Background Color
Not only can you change the color of the links, their size, shape and style, but you can change the background. Here's an example:

And in the text

And you see:

Text goes here

Notice how clicking on the link changes its background. If you'd like, you could have the links always highlighted.

Changing Fonts
Here's one that's so ugly, I really don't want to show it to you. You can change the font of a link using CSS. This is ugly and distracting. See if you can see why I don't recommend it.

And in the text

And you see:

Text goes here

Just my personal opinion, but having the fonts jump around like that is distracting and not very attractive.

Decoration
Now this one, I really do like. You can change the decoration of your font in a link. This means that you can make it underlined, not underlined, or a bunch of fancy decorations.

And in the text

And you see:

Text goes here

Use this in conjunction with other styles to really make your links come to life!

This page relied heavily on W3schools.com