homepage Welcome to WebmasterWorld Guest from 54.161.192.130
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, Moderators: not2easy

CSS Forum

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

5+ Year Member



 
Msg#: 3459362 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3459362 posted 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

5+ Year Member



 
Msg#: 3459362 posted 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