CSS Styling HTML Links <a href...

Hyperlinks are the backbone of webpages. It allows us to interlink a group of webpages making it a website. With CSS, you can greatly modify the appearance of these links and make your webpage even more appealing

As you are well aware of, links in HTML are created using the <a> (anchor) tag.

Example:

a {
    font-size: 12px;
    color: #222222;
}

Hyperlinks can be styled in many different ways, of course, the color, font-family, background etc. properties do work for links, but they can also be styled according to the state that they are in.

There are four types of states a link can be in:

• a:link → A normal, unvisited link.
• a:visited → A link that the user has visited(clicked on) before.
• a:hover → When the user moves the mouse over the link.
• a:active → The moment a link is clicked.

When setting the style for the link states, a few rules need to be kept in mind.

• a:hover always comes after a:link and a:visited
• a:active always comes after a:hover

Consider the following example:

/* unvisited link */
a:link { color: #00ffff; }

/* visited link */
a:visited { color: #808080; }

/* mouse over link */
a:hover { color: #000088; }

/* selected link */
a:active { color: #0000ff; }

Live Example →

Recall the text-decoration property we studied previously. The text decoration property is used to change the appearance of your links, such as removal of underlines or adding cross-lines to it. Also, let's go back to the background properties. Links can be styled in different ways using the class and id selectors. All these properties work with the <a> tag, so feel free to experiment as you like.

Small change with Big impact cursor:pointer;

Whenever we hover over a link, the mouse cursor changes from an arrow into a hand pointer. Have you ever thought why? Or How? It is accomplished using the property cursor. It can take various different values, of which pointer is one.

a:hover { 
    color: #000088; 
    cursor: pointer;
}

Live Example →

Following are some of the commonly used values for cursor property:

• cursor:crosshair
• cursor:help
• cursor:move
• cursor:pointer
• cursor:progress
• not-allowed
• cursor:wait etc.

Also, its not mandatory that this must be used on links only, this can be used with any HTML element/tag.

Live Example →

Styling Links into Buttons

We can even style our links to look like rectangular buttons, changing color on hover, just like the ones below:

Small Green Button  Medium Blue Button  Large White Button

These are links styled to amaze. We will learn how this is done, once we are done with margin and padding. If you cannot stop yourself from checking out the CSS code for styling links like these buttons, go checkout the tutorial.

Phew! By now, you have studied all about selectors, backgrounds and fonts. It’s now time to move on to the next level in CSS. Next up is lists, tables and border designs. Keep Going! See you in the next lesson!