CSS Links
With CSS, links can be
styled in many 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;
}
In addition, links can be
styled differently depending on what state they
are in.
The four links states are:
- a:link - a normal, unvisited link
- a:visited - a link the user has
visited
- a:hover - a link when the user
mouses over it
- a: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;
}
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
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;
}
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;
}
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;
}
More Examples
Example
This
example demonstrates how to add other styles to hyperlinks:
a.one:link {color: #ff0000;}
a.one:visited {color: #0000ff;}
a.one:hover {color: #ffcc00;}
a.two:link {color: #ff0000;}
a.two:visited {color: #0000ff;}
a.two:hover {font-size: 150%;}
a.three:link {color: #ff0000;}
a.three:visited {color: #0000ff;}
a.three:hover {background: #66ff66;}
a.four:link {color: #ff0000;}
a.four:visited {color: #0000ff;}
a.four:hover {font-family: monospace;}
a.five:link {color: #ff0000; text-decoration: none;}
a.five:visited {color: #0000ff; text-decoration: none;}
a.five:hover {text-decoration: underline;}
Example
Another
example of how to create link boxes/buttons:
a:link, a:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: green;
color: white;
}
This
example demonstrates the different types of cursors (can be useful for links):
<span style="cursor:
auto">auto</span><br>
<span style="cursor:
crosshair">crosshair</span><br>
<span style="cursor:
default">default</span><br>
<span style="cursor:
e-resize">e-resize</span><br>
<span style="cursor:
help">help</span><br>
<span style="cursor:
move">move</span><br>
<span style="cursor:
n-resize">n-resize</span><br>
<span style="cursor:
ne-resize">ne-resize</span><br>
<span style="cursor:
nw-resize">nw-resize</span><br>
<span style="cursor:
pointer">pointer</span><br>
<span style="cursor:
progress">progress</span><br>
<span style="cursor:
s-resize">s-resize</span><br>
<span style="cursor:
se-resize">se-resize</span><br>
<span style="cursor:
sw-resize">sw-resize</span><br>
<span style="cursor:
text">text</span><br>
<span style="cursor:
w-resize">w-resize</span><br>
<span style="cursor:
wait">wait</span>
