CSS Links
Links are mostly used in HTML. You can style links in different ways using CSS.
Example:
Styling Links
Links can be styled using a lot of CSS property such as: font-family, font-size, color etc.. Moreover there are several states in CSS links. Depending on these states links can be styled in different ways.
The 4 states of links are given:
- a:link - normal link which is not visited.
- a:visited - a link which is visited by the user.
- a:hover - a link when an user put mouse pointer over it.
- a:active - active states of a link.
Example:
a:link
{
color: lightblue;
}
a:visited {
color: green;
}
a:hover {
color: blue;
}
a:active {
color: black;
}
color: lightblue;
}
a:visited {
color: green;
}
a:hover {
color: blue;
}
a:active {
color: black;
}
Run Example
Text Decoration
By default the links are underlined. You can remove the underline using text-decoration property. there are two values of text-decoration property: none and underline.
Example:
a:link
{
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
text-decoration: none;
}
a:active {
text-decoration: underline;
}
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
text-decoration: none;
}
a:active {
text-decoration: underline;
}
Run Example
Style Link as Button
Using the various properties you can style a link as a button.
Example:
a:link, a:visited
{
color: #fff;
background-color: #000;
padding: 15px 27px;
display: inline-block;
text-decoration: none;
text-align: center;
}
a:hover, a:active {
color: #000;
background-color: lightblue;
}
color: #fff;
background-color: #000;
padding: 15px 27px;
display: inline-block;
text-decoration: none;
text-align: center;
}
a:hover, a:active {
color: #000;
background-color: lightblue;
}
Run Example