Direct link to the article CSS Basics: Styling Links Like a Boss

CSS Basics: Styling Links Like a Boss

You are probably well acquainted with how links looks without any styling at all. That blue. That underline. That's a link in it's purest form. But what if we want to change things up a bit? Perhaps blue doesn't work with your website's design. Maybe you have an aversion to underlines. Whatever the reason, CSS lets us style links just like any other element.

Avatar of Geoff Graham
Geoff Graham on (Updated on )

How to Disable Links

The topic of disabling links popped up at my work the other day. Somehow, a “disabled” anchor style was added to our typography styles last year when I wasn’t looking. There is a problem though: there is no real way …

Avatar of Gerard Cohen
Gerard Cohen on

:any-link

The :any-link pseudo-class in CSS provides a method for selecting elements that are the source anchor of a hyperlink.

If the term source anchor lost you, that’s a fancy name for the href attribute on the HTML elements <a>, …

Avatar of Geoff Graham
Geoff Graham on (Updated on )

:link

The :link selector is a pseudo-class that targets all anchor (<a) elements on a page that have an href attribute:

a:link {
  color: aquamarine;
}

The example above will change the color of all links to aquamarine.

When …

Avatar of Sara Cope
Sara Cope on (Updated on )

Alternative Style Links

You may know the classic link style very well. Blue with an underline. There is an alternative way to achieve the same effect, that is a bit nicer.

Here is the code:

a {
  text-decoration: none;
  background: url(link-line.gif) repeat-x 0 
Avatar of Volkan Görgülü
Volkan Görgülü on (Updated on )