CSS Links

You may be familiar with HTML links, where you link to another web page. But did you know that you can also create CSS links?

OK, CSS links are actually HTML links - in disguise!

What is a CSS Link?

When we say "CSS links" most people (or at least, most web developers) think of hyperlinks that look and/or behave differently to normal HTML links. There is actually an HTML link tag that allows you to link to an external style sheet, but that's not what we're going to talk about here.

Commonly, CSS links will have that "hover over" effect when you move your cursor over the link. Sometimes a CSS link will have its underline removed. This page explores some of the common effects that you can achieve with CSS links.

Hover Over Effect

Probably the most common use of CSS on hyperlinks is for that "hover over" effect. Usually the link will change color when the user moves their mouse, so that the cursor hovers over the link. Sometimes the underline will disappear (or appear), when the link is hovered over. But, you are not limited to just these effects. With hover overs, you can specify any style that CSS allows. You could bold text, make it italic, increase the size, change the background color... anything. Having said that, you should be mindful of how it will look in all browsers. Changing size or font weight can result in the layout jumping around (due to increased font mass).

Anyway, the hover over effect is done using the CSS a:hover pseudo-class. You can follow this selector with any style you wish. Here are some examples:

Example:

Source Code

Result

<!-- Codes by HTMLcodes.me -->
            <html>
            <head>
            <style type="text/css">
            ul.cssLinkExample a {color:blue;text-decoration:underline;}
            a:hover.hChangeColor {color:LawnGreen;}
            a:hover.hMakeBold {font-weight:bold;}
            a:hover.hRemoveUnderline {text-decoration:none;}
            a:hover.hMakeItalic {font-style:italic;}
            a:hover.hChangeBackgroundColor {background-color:LightSteelBlue;}
            a:hover.hIncreaseFontSize {font-size:20px;}
            a:hover.hBottomBorder {border-bottom:1px dashed blue;}
            </style>
            </head>
            <body>
            <p><b>Great Website Tutorials</b></p>
            <ul class="cssLinkExample">
            <li><a href="http://www.quackit.com/html/tutorial/" class="hChangeColor">Learn HTML</a></li>
            <li><a href="http://www.quackit.com/css/tutorial/" class="hMakeBold">Learn CSS</a></li>
            <li><a href="http://www.quackit.com/javascript/tutorial/" class="hRemoveUnderline">Learn JavaScript</a></li>
            <li><a href="http://www.quackit.com/coldfusion/tutorial/" class="hMakeItalic">Learn ColdFusion</a></li>
            <li><a href="http://www.quackit.com/database/tutorial/" class="hChangeBackgroundColor">Learn Databases</a></li>
            <li><a href="http://www.quackit.com/sql/tutorial" class="hIncreaseFontSize">Learn SQL</a></li>
            <li><a href="http://www.quackit.com/sql/tutorial" style="text-decoration:none;" class="hBottomBorder">Learn PHP</a></li>
            </ul>
            </body>
            </html>
            <p><a  style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/links/css-links.cfm">CSS links</a></p>

Great Website Tutorials

Mouseover Buttons

You can apply the hover pseudo class to any tag - it doesn't just have to be the anchor tag. This means that it's easy to create a CSS button with a hover over effect. Simply create a button from say, a div tag, then apply the hover pseudo tag to the div. Or, if you prefer to use lists for your menus, apply the hover over to the li tag.

Example:

Source Code

Result

<!-- Codes by HTMLcodes.me -->
            <html>
            <head>
            <style type="text/css">
            ul.cssMenu {border-bottom:1px solid black;}
            ul.cssMenu li {border:1px solid black;border-bottom:0;background-color: #D8BFD8;padding:3px;list-style-type:none;display:inline;}
            ul.cssMenu li a {color:black;}
            ul.cssMenu li:hover {background-color: #ede2ed;}
            </style>
            </head>
            <body>
            <ul class="cssMenu">
            <li><a href="http://www.quackit.com/html/tags/">HTML Tags</a></li>
            <li><a href="http://www.quackit.com/html_5/tags/">HTML5 Tags</a></li>
            <li><a href="http://www.quackit.com/css/properties/">CSS Properties</a></li>
            </ul>
            </body>
            </html>
            <p><a  style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/links/css-links.cfm">CSS links</a></p>

Active Links

You can also change the style of active links. That is, links that have just been clicked on. In the following example, we change the hover over effect to an active link effect. Therefore, the style effect doesn't happen until the user clicks on the link.

Click each link below to see what happens when you click on it.

Source Code

Result

<!-- Codes by HTMLcodes.me -->
            <html>
            <head>
            <style type="text/css">
            ul.cssLinkExample a {color:blue;text-decoration:underline;}
            a:active.aChangeColor {color:LawnGreen;}
            a:active.aMakeBold {font-weight:bold;}
            a:active.aRemoveUnderline {text-decoration:none;}
            a:active.aMakeItalic {font-style:italic;}
            a:active.aChangeBackgroundColor {background-color:LightSteelBlue;}
            a:active.aIncreaseFontSize {font-size:20px;}
            a:active.aBottomBorder {border-bottom:1px dashed blue;}
            </style>
            </head>
            <body>
            <p><b>Great Website Tutorials</b></p>
            <ul class="cssLinkExample">
            <li><a href="http://www.quackit.com/html/tutorial/" class="aChangeColor">Learn HTML</a></li>
            <li><a href="http://www.quackit.com/css/tutorial/" class="aMakeBold">Learn CSS</a></li>
            <li><a href="http://www.quackit.com/javascript/tutorial/" class="aRemoveUnderline">Learn JavaScript</a></li>
            <li><a href="http://www.quackit.com/coldfusion/tutorial/" class="aMakeItalic">Learn ColdFusion</a></li>
            <li><a href="http://www.quackit.com/database/tutorial/" class="aChangeBackgroundColor">Learn Databases</a></li>
            <li><a href="http://www.quackit.com/sql/tutorial" class="aIncreaseFontSize">Learn SQL</a></li>
            <li><a href="http://www.quackit.com/sql/tutorial" style="text-decoration:none;" class="aBottomBorder">Learn PHP</a></li>
            </ul>
            </body>
            </html>
            <p><a  style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/links/css-links.cfm">CSS links</a></p>

Great Website Tutorials

Visted Links

Visited links are those links where the user has previously visited. More specifically, it's a link that is currently in the browser's browsing history.

You can change the style of visited links. Most browsers change the color by default.

In the example below, the style sheet specifies a color for hyperlinks, but it specifies different color for visited links. To test this, click on one of the links, then return to this page (you may need to refresh the page). The visited link should be a different color to the unvisited links. This assumes of course, that you haven't visted these links before. If you have, refresh your browsing history first.

Source Code

Result

<!-- Codes by HTMLcodes.me -->
            <html>
            <head>
            <style type="text/css">
            ul.vCssLinkExample a {color:blue;text-decoration:underline;}
            ul.vCssLinkExample a:visited {color:SkyBlue;}
            </style>
            </head>
            <body>
            <p><b>Great HTML/CSS Reference</b></p>
            <ul class="vCssLinkExample">
            <li><a href="http://www.quackit.com/html/">HTML</a></li>
            <li><a href="http://www.quackit.com/html_5/">HTML 5</a></li>
            <li><a href="http://www.quackit.com/css/">CSS</a></li>
            </ul>
            </body>
            </html>
            <p><a  style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/links/css-links.cfm">CSS links</a></p>

Great HTML/CSS Reference