This site is mobile accessible. Press the "Tap Here" button to use a smaller font-size.
Smartphone icons created by Freepik - Flaticon
With CSS, links can be styled in different ways.
Links can be styled with any CSS property (e.g.
, , , etc.).a { color: hotpink; }
In addition, links can be styled differently depending on what state they are in.
The four links states are:
/* 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:
The
property is mostly used to remove underlines from links:a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: underline; }
The
property can be used to specify a background color for links:a:link { background-color: yellow; } a:visited { background-color: cyan; } a:hover { background-color: lightgreen; } a:active { background-color: hotpink; }
This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes/buttons:
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; }
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;}
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). Hover your mouse over each word below to see the different cursors.
auto
crosshair
default
e-resize
help
move
n-resize
ne-resize
nw-resize
pointer
progress
s-resize
se-resize
sw-resize
text
w-resize
wait