

I’ve been back and forth on the issue of styling links in my personal projects, as well as in our code at work, and I’ve decided I’m removing the assumption from my stylesheets that all a tags are links. Finally, let up on the mouse button and the link should turn purple before it’s technically been visited. Then, click on the link, but leave your mouse button clicked down for a little bit to see how the active style changes the color of the link to black. First, try hovering your mouse on top of it without clicking and notice that it becomes underlined. Here is the same link we have been looking at. that is L(ink)OV(isted)E / H(over)A(Active)TE. One way to remember the order is LOVE and HATE. Focus is an accessibility feature, thus last because it is most important. In my imaginary example there, the :visited style would override the :hover style, which is highly unlikely that is what you want.

If you don’t do it in this order (imagine, say, your :visited style comes after your :hover style) the links won’t behave quite how you want. Hover and focus states are often styled together.

Link ( :link): This is probably the least used, but it’s for styling elements that have an href, rather than placeholder links.There are three additional states of a link that are worth considering anytime we change the default style of links: Links have different states, meaning they adapt when we interact with them on a webpage. Now we’re cooking with gas! But why stop there? Let’s look at a few other ways we can style links to complete the experience.
