Thursday, 6 December 2012

Styling links and anchors with CSS by example


How do I style anchors and links with CSS? Additionally, how do I override these styles?


The examples below in this post will demonstrate how to use the most common pseudo-classes of website links: link, visited, hover, active.

Here's what the pseudo-classes mean:

:linkall unvisited links
:visitedall visited links
:activethe active link
:hoverthe link selected on mouseover

Link defaults (covers all links in the document):

:link { color:blue; text-decoration:underline; }
:visited { color:green; text-decoration:underline; }
:link:hover { color:blue; text-decoration:none; }
:link:active { color:blue; text-decoration:underline; }

Anchor defaults (covers all links embedded in anchors):

a:link { color:blue; text-decoration:underline; }
a:visited { color:green; text-decoration:underline; }
a:hover { color:blue; text-decoration:none; }
a:active { color:blue; text-decoration:underline; }

Override (covers all links embedded in anchors with the class 'overrideClass'):

a.overrideClass:link { color:red; text-decoration:none; }
a.overrideClass:visited { color:orange; text-decoration:none; }
a.overrideClass:hover { color:red; text-decoration:underline; }
a.overrideClass:active { color:red; text-decoration:underline; }


No comments:

Post a Comment