Loading lesson path
Concept visual
Start at both ends
HTML links can be styled with many CSS properties, like color, text-decoration, background-color, font-size, font-weight, font-family, etc.).
Formula
Style a link with a color, background - color, and a bold font - weight:a {
color: hotpink;
background-color: yellow;
font-weight: bold;
}In addition, links can be styled differently depending on what state they are in.
:link - a normal, unvisited link :visited - a link the user has visited :hover - a link when the user mouses over it :active - a link the moment it is clicked When setting the style for link states, there are some order rules: :hover must come after :link and :visited :active must come after :hover
Style links according to link state: /* 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;
}Formula
CSS Links - 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;
}Formula
CSS Links - 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;
}This example demonstrates how to add other styles to HTML links:
a.one:link {color:red;}
a.one:visited {color:blue;}a.one:hover
{color:orange;}
a.two:link {color:red;}
a.two:visited {color:blue;}
a.two:hover {font-size:150%;}
a.three:link {color:red;}
a.three:visited {color:blue;}
a.three:hover {background:lightgreen;}
a.four:link {color:red;}
a.four:visited {color:blue;}a.four:hover
{font-family:monospace;}
a.five:link {color:red;text-decoration:none;}
a.five:visited {color:blue;text-decoration:none;}a.five:hover
{text-decoration:underline;}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>
Formula
< span style ="cursor: e - resize"> e - resize </span >< br ><span style="cursor: help">help</span><br> <span style="cursor: move">move</span><br>
Formula
< span style ="cursor: n - resize"> n - resize </span >< br >
< span style ="cursor: ne - resize"> ne - resize </span >< br ><span style="cursor:
Formula
nw - resize"> nw - resize </span >< br ><span style="cursor: pointer">pointer</span><br> <span style="cursor: progress">progress</span><br>
Formula
< span style ="cursor: s - resize"> s - resize </span >< br ><span style="cursor:
Formula
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:
Formula
w - resize"> w - resize </span >< br ><span style="cursor: wait">wait</span>