15. Styling links

You’re probably pretty used to working with your style sheet now but CSS is such a huge field that you will always be learning new things. It’s now time to change the style of our links. We’ll do this by adding the following rule to your style sheet:

nav li a:link, nav li a:visited {
    font-family      : Verdana, sans-serif;
    font-size        : 14px;
    font-weight      : 900;
    color            : #0101df;
    text-decoration  : none;
}

We’ve seen the font properties before but there’s a couple of new elements to this rule that you’re probably curious about.

The first thing to note is that we’ve created a rule that applies to multiple descendant selectors! Don’t be intimidated by that, it’s nothing new, it just looks complicated. Within those descendant selectors we have made reference to “a:link” and “a:visited“.

Pseudo-classes
You’re probably starting to get somewhat overwhelmed at the amount of terminology being used but I promise we’re nearly done! A pseudo-class is a special effect that can be applied to some selectors. The “a” selector is a unique one that can have some of it’s states customised individually. In my example I’ve altered the “link” and “vlink” pseudo-classes (“vlink” just stands for “visited link“). To refer to a pseudo-class you just use a colon (“ : “) in between the selector and the pseudo-class.

text-decoration
This property simply determines what sort of decoration is going to be used in this rule. Links by default have an underline and so by setting this property to “none“, the underline is removed.

And so now our links look a bit more customised. Feel free to experiment with other pseudo-classes or text effects.

Leave a Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>