The anchor tag is responsible for links. We can
set specific values for the anchor. These values will be for the link,
active and visited. We can also have a hover property in styles. 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! |