This page is a work in progress.You can help improve it. →

C# Numbers

Styling links

If we have the following HTML:

<p>Welcome to our page. Click <a href="menu.html">here</a> to see our menu</p>

and we apply a color such as the following

p {
color: #85577e;
}

you will notice that the links themselves are not in the specified color. We must style <a> elements specifically.

A link can be:

UnvisitedThe href has never been visited by this browser
VisitedThe href has been visited by this browser
FocusThe user has focused the element, typically by using the TAB key to navigate the page to that element
HoverThe user's pointer is over that link (hovering). Mobile browsers do not necessarily supoprt this
ActiveThe link is clicked, but hasn't transitioned the user to the href

Pseudo Selectors

SelectorDescription
:linkThe href has never been visited by this browser
:visitedThe href has been visited by this browser
:focusThe user has focused the element, typically by using the TAB key to navigate the page to that element
:hoverThe user's pointer is over that link (hovering). Mobile browsers do not necessarily supoprt this
:activeThe link is clicked, but hasn't transitioned the user to the href

Mnemonic to remember

When we style these in CSS we must place them in this order in our CSS. If we do not use this order we can see some unexpected results.

So how do we remember this order? Here are two phrases to help

Lord Vader Former Handle Anakin

(L)ord (L)ink
(V)ader (V)isited
(F)ormer (F)ocus
(H)andle (H)over
(A)nakin (A)ctive

Lord Voldemort Fears Hogwarts Alumni

(L)ord (L)ink
(V)oldemort (V)isited
(F)ears (F)ocus
(H)ogwarts (H)over
(A)lumni (A)ctive

Examples

/* Style all links, visited or not, with the same color. */
a:link,
a:visited,
a:focus {
color: #85577e;
}
/* Change the hover color */
a:hover {
color: #f99d1b;
}
/* Finally, the active link color */
a:active {
color: #2f3737;
}
© 2017 - 2021; Built with ♥ in St. Petersburg, Florida.