Styling Links in CSS

Links are vital.  Links connect your web pages.  Links provide access to other content on the internet.  They keep the possibilities endless.  You probably already knew this, but did you know there are 4 states of links in CSS.  They are:

a:link = a normal, untouched, unvisited link

a:visited = obviously a link that has been clicked on 

a:hover – a link when the cursor of the mouse moves over it

a:active – a link the moment it is clicked

Simple enough.  There are only two rules to follow when writing link your code for link states.  They are that a:hover must follow after a:link and a:visited ANDDDDD a:active must follow after a:hover.  So essentially the order is always a:link > a:visited > a:hover > a:active.  Lets try this!



Here’s our code.  Simple enough.  One link with certain colors for each state.  Now lets look at our link.



Since I’ve clicked it multiple times it is a visited link so it’s red-orange.  



When I hover my mouse over the link, notice how it will become the swamp-green color we wrote in our HTML code.  



And here’s our link when I’m clicking the mouse button over it.  The link becomes active; thus, turning a shade of blue we had written in our code earlier.  And this is only for color.  Following the formula, you can also style your links with Text Decoration {text-decoration:underline} or Background Color {background-color:FF0033} for example.  Links are a vital asset.  So, play around and check it out!  

~ by kevhillnyu on October 6, 2013.

One Response to “Styling Links in CSS”

  1. […] Styling Links in CSS ( […]

Comments are closed.

%d bloggers like this: