homepage Welcome to WebmasterWorld Guest from 23.20.19.131
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Styling links (anchor tags)
Style elements for links (anchor tags)
Adam5000




msg:3459364
 5:02 pm on Sep 24, 2007 (gmt 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!

 

Robin_reala




msg:3459515
 8:11 pm on Sep 24, 2007 (gmt 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.

Adam5000




msg:3459646
 10:16 pm on Sep 24, 2007 (gmt 0)

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

You're a genius Robin.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved