Welcome to WebmasterWorld Guest from 54.167.46.29

Forum Moderators: not2easy

Message Too Old, No Replies

Styling links (anchor tags)

Style elements for links (anchor tags)

     
5:02 pm on Sep 24, 2007 (gmt 0)

Preferred Member

10+ Year Member

joined:Apr 1, 2005
posts:369
votes: 0


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!

8:11 pm on Sept 24, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 0


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.
10:16 pm on Sept 24, 2007 (gmt 0)

Preferred Member

10+ Year Member

joined:Apr 1, 2005
posts:369
votes: 0


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

You're a genius Robin.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members