8 Controlling Links Attributes Through Style Sheets

1. To set the color of hyperlink text type in the following element:

A.link {

}

2. Between the brackets you can set the color. Here we set the color to fuschia.

A.link {
color: fuchsia;
}

3. Other attributes are those that are used for any text element.  Try putting a background-color  around it as if it was highlighted.

A.link {
color: fuchsia;
background-color: yellow;
}

4. Set the text to look very different by setting it to small caps.

A.link {
color: fuchsia;
background-color: yellow;
font-variant: small-caps;
}

5. Often as we design we want out links to stand out but not be decorated with underline. add a text-decoration attribute to none.

A.link {
color: fuchsia;
background-color: yellow;
font-variant: small-caps;
text-decoration: none;
}

6. Now set the properties of the visited and the active links using the following tags:

A.visited {
}

A.active {
}

Fill in your color and properties.

7. There is also a hover property that we can assign to the link for when the cursor is over the link without clicking. Set the hover text to blue.

. A.hover {
color: blue;
text-decoration: underline;
font-variant: small-caps;
}

Publish your CSS and link your html you are working on to it and see how the text changes!