March 1Mar 1 Administrators CSS Links Text Link Text Link CSS Styling Links HTML links can be styled with many CSS properties, like color, text-decoration, background-color, font-size, font-weight, font-family, etc.). Example Style a link with a color, background-color, and a bold font-weight: a { color: hotpink; background-color: yellow; font-weight: bold;} Try it Yourself » Styling Links Depending on State In addition, links can be styled differently depending on what state they are in. The four link states are: :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 Example 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;} Try it Yourself » 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;} Try it Yourself » 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;} Try it Yourself » More Examples Example 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;} Try it Yourself » Example 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> Try it Yourself » ★ +1 Sign in to track progress
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.