Wednesday, August 24, 2011

CSS3 Tutorial 7: Styling Links

Styling links in CSS3 is just as simple as Text. You can style the link, the link after it's visited, the link when it's hovered over and the link when it is clicked. Links can be styled with any CSS property. Here's some examples of Link Styling:
a:link {color:#ff0000;}
a:visited {color:#00ff00;}
a:hover {color:#ff00ff;}
a:active {color:#0000ff;}
When setting the style for the different link states they must be in the above order to work properly.

Text decoration for links is the same as text as well, Here's an example:
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
Background color for links is the same as anything else in CSS too:

a:link {background-color:#b2ff99;}
a:visited {background-color:#ffff85;}
a:hover {background-color:#ff704d;}
a:active {background-color:#ff704d;}

13 comments:

  1. very helpful, thanks! I'm still new to all this so I'm looking forward to more tutorials!

    ReplyDelete
  2. my friend actually just asked me about this, imma link him over to this so he knows how to do that, something bout needing it for his own page he wont say what for tho

    ReplyDelete
  3. Nice, great tools for customizing the little details on your site that really add up.

    ReplyDelete
  4. Thanks, I was looking for a tutorial about this.

    ReplyDelete
  5. Wow, simple as that, huh? Thanks for the tutorial! +followed

    ReplyDelete
  6. learning a ton from your tutorials, thanks again.

    ReplyDelete
  7. Sweet, keep em coming. Hope to be a css ninja eventually.

    ReplyDelete
  8. Simple and noob friendly, thanks.

    ReplyDelete
  9. a:link {color:#ff0000;}
    a:visited {color:#00ff00;}
    a:hover {color:#ff00ff;}
    a:active {color:#0000ff;}

    I used this code for some of the text that I used on my old website.

    ReplyDelete