Styling links (anchor tags)

Style elements for links (anchor tags)

[Adam5000]

Several of my pages have links to other pages on them. And I'd like to style the words on the screen.

For example:

<a href="page_two">Next Page</a>

And I'd like to style the words "Next Page". Specifically the size of the text and the color of the text both normal and on mouseover. And I'd also like to remove the line under the link.

Help!

[Robin_reala]

Simple enough!

a {
font-size: 1em;
color: blue;
text-decoration: none;
}
a:hover {
font-size: 1.2em;
color: red;
}

Breaking that down, the 'a' at the beginning selects all <a> elements on the page, then applies a normal font size, makes the text blue, and gets rid of the underline. The next block that starts with a:hover selects all <a>s again, but then filters them to only apply the styles to those that match the pseudoclass ':hover', i.e. those that are in the state 'being hovered over'. Here we up the font size (1.2em, i.e. 120% of normal) and make the text red. Notice that we don't need to redefine the text-decoration statement, as we've already applied that for all <a>s in the block above. We could though of course add a

text-decoration:underline;

rule on :hover so that when you hover over a link it gains an underline.

[Adam5000]

That worked fabulous Robin and it makes the page look great.

You're a genius Robin.