CSS Links
<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
CSS Links
❮ Previous
Next ❯
With CSS, links can be styled in different ways.
Text Link
Text Link
Link Button
Link Button
Styling Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
Example
a {
color: hotpink;
}Try it Yourself »
In addition, links can be styled
differently depending on what state they are in.
The four links states are:
a:link- a normal, unvisited linka:visited- a link the user has visiteda:hover- a link when the user mouses over ita:active- a link the moment it is clicked
Example
/* unvisited link */
a:link {
color: red;
}
/* visited
link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}Try it Yourself »
When setting the style for several link states, there are some order rules:
- a:hover MUST come after a:link and a:visited
- a:active MUST come after a:hover
<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]-->
Text Decoration
The text-decoration property is mostly used to remove underlines from links:
Example
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}Try it Yourself »
Background Color
The background-color property can be used to specify a background color for links:
Example
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
Try it Yourself »
Advanced - Link Buttons
This example demonstrates a more advanced example where we combine several CSS
properties to display links as boxes/buttons:
Example
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}Try it Yourself »
More Examples
Add different
styles to hyperlinks
This example demonstrates how to add other styles to hyperlinks.
Advanced -
Create a link button with borders
Another example of how to create link boxes/buttons.
Change the cursor
The cursor property specifies the type of cursor to display.
This example demonstrates the different types of cursors (can be useful for
links).
Test Yourself with Exercises!
Exercise 1 »
Exercise 2 »
Exercise 3 »
Exercise 4 »
❮ Previous
Next ❯