CSS Link

You can style HTML links (a elements) using CSS properties and CSS selectors. HTML links can be either text links, image links or block links ( a block of HTML ). Here are three HTML link examples:

<a href="/next-page.html">Text link</a>

<a href="/next-page.html"><img src="/cft/next.png"></a>

<a href="/next-page.html">
    <div>
        <img src="/cft/next.png">
        Next page
    </div>
</a>

The first a element is a text link because the a element body just contains text.

 

The second a element is an image link because the a element body just contains an img element.

 

The third a element is a block link because the a element body contains a block of HTML. Block links have not always been supported by the browsers, but at the time of writing they work in most browsers (if not all).

 

Styling Text Links

 

Text links can be styled using all of the CSS text styling properties. That means that you can set the font-family, font-size, font-weight, color, text-decoration etc. of text links. Here is a text link CSS styling example:

<style>
    a {
        font-family: Helvetica;
        font-size:   1em;
        font-weight: bold;
        color      : #000099;
        text-decoration: none;
    }
</style>

This example CSS rule sets the font-family to Helvetica, sets the font-size to 1em, sets the font-weight to bold, the color to #000099 (darker blue), and removes the default underlining, for all a elements.

 

Here is how a text link looks with these styles applied:

 

Text link

 

Styling Image Links

 

When a link contains an image you can style either the a element or the img element. Images can be styled using any of the standard image styling CSS properties.

 

Styling Block Links

 

When you style block links you typically style the HTML inside the a element, and not the a element itself.

 

a:link , a:visited , a:hover , a:active

a:link    { color: #00ff00; }
a:visited { color: #009900; }
a:hover   { color: #66ff66; }
a:active  { color: #ffff00; }

Styling Links As Buttons

 

You can style a link to look like a button. You do so by setting the border, background-color, color and padding CSS properties, in addition to the text properties. Here is an example:

a.greenButton {
    border: 2px solid #006600;
    background-color: #009900;
    color: #ffffff;
    text-decoration: none;
    margin : 20px;
    padding: 10px 20px 10px 20px;
    display: inline-block;
}
a.greenButton:hover {
    border: 2px solid #009900;
    background-color: #00cc00;
}

Here is how a text link looks with these styles applied:

Link Button

Notice how the button changes color when you hover the mouse over it.

 

You can also make the corners round with the border-radius CSS property. Here is a code example:

a.greenButtonRound {
    border: 2px solid #006600;
    border-radius: 5px;
    background-color: #009900;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    margin : 20px;
    padding: 10px 20px 10px 20px;
    display: inline-block;
}
a.greenButtonRound:hover {
    border: 2px solid #009900;
    background-color: #00cc00;
}