1. CSS Tutorial
2. Using CSS in HTML
3. CSS Properties and CSS Rules
4. CSS Selectors
5. CSS Inheritance
6. CSS Precedence
7. CSS Box Model
8. CSS margin
9. CSS padding
10. CSS border
11. CSS Units
12. CSS Colors
13. CSS Text Styling
14. CSS List Styling
15. CSS Table Styling
16. CSS Link Styling
17. CSS Form Styling
18. CSS Image Styling
19. CSS Background Images
20. CSS Gradients
21. CSS Box Shadow
22. CSS display
23. CSS float
24. CSS position
25. CSS Media Queries
26. CSS Column Layout
27. CSS opacity
28. CSS Web Fonts
29. CSS 2D Transformations
30. CSS Transitions

• Styling Text Links
• Styling Image Links
• Styling Block Links
• a:link , a:visited , a:hover , a:active
• Styling Links As Buttons

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="next.png"></a>

<a href="/next-page.html">
    <div>
        <img src="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:

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;
}

And here is what the button looks like with rounded corners (and bold text):