CSS Tutorial
Handling Links In CSS
Links or hyperlinks are an essential part of a website as they
provide navigation through the site.
Therefore styling the links properly is an important aspect of
building a user-friendly website.
Example:
a
{
color: red;
}
This will style all aspects of the link (hover, visited, and active).
To style each part separately, we use pseudoclasses
The Link PseudoClasses
A link has four different states :
>link
>visited
>hover and
>active
These four states of a link can be styled differently using the
following anchor pseudo-class selectors:
>a:link
define styles for normal or unvisited links.
>a:visited
define styles for links that the user has already visited.
>a:hover
define styles for a link when the user places the mouse
pointer over it.
>a:active
define styles for links when they are being clicked.
Example:
a:link { /* unvisited link */
color: #ff0000;
text-decoration: none;
}
a:visited { /* visited link */
color: #ff00ff;
}
a:hover { /* mouse over link */
color: #00ff00;
}
a:active { /* active link */
color: #00ffff;
}
Making Link Look Like Button
We can also make our ordinary text links look like button using
CSS.
To do this we need to utilize 3 more CSS properties which are
background-color
border
padding
Example:
a:link,
a:visited {
color: white;
background-color: #1ebba3;
padding: 5px 20px;
border: 2px solid #099983;
text-decoration: none;
text-align: center;
font-size: 22px;
font-family: "Tangerine", cursive;
}