Expression® Web Design
Changing the Colors of Hyperlinks
Friday, January 02, 2009
Usually (by default), hyperlinks are blue and underlined, the visited links are purple, and when you mouseover (hover) over them with your mouse, they turn red. More and more people are wanting their hyperlinks now to stand out more or even blend in with their text. With a style sheet, this can easily be accomplished. If you decide to use styles to change your hyperlinks, you need to make sure you have a DOCTYPE. This helps to prevent some browsers going into quirks mode. Also, relying on styles for your hyperlinks, you can set up different styles for hyperlinks that you use for your navigation, footer, and just the "regular" hyperlinks.The W3 considers this as a pseudo-class. Basically this is used to help style the anchor (hyperlink) and other elements on characteristics other than the name, attribute, or content. For these examples, I will use a a basic table layout to help users see how styles can be applied to hyperlinks. The same idea can be applied to divides (hopefully you are using them now to help layout your website).
As you read, you will notice that the pseudo-class (link, visited, hover, active) are in this specific order. They have to always be in this order (I remember this as love-hate) for them to work properly.
Hyperlink Styles
In this example, we will give examples of the basic hyperlink style that can be placed in your style sheet. Usually, you want your hyperlinks to stand out from your regular text so your readers will click on them to possibly read more of your website. So in this example, the hyperlink is Dark Red (#8b0000) and when you mouse over the link, the link turns Navy (#000080) and the underline disappears.If you click on the hyperlinks in the example, you will see that the color is the same, even though it is considered visited. This is also easily controlled in CSS. If you also notice, the hyperlink will turn bold when you click (activate) it.
a:link {
color: #8b0000;
}
a:visited {
color: #8b0000;
}
a:hover {
color: #000080;
text-decoration:none;
}
a:active {
color: #000080;
font-weight:bold;
}
Source code example: Text file (174 bytes) / Zipped file (all files (txt, css, html) 3,911 bytes)
Apply Different Styles to Specific Hyperlinks
So far we have applied a style to the "regular" hyperlinks in the web pages. Sometimes though, you might want the hyperlinks that are in the navigation, footer, or other areas of you web page to stand out even more. This can easily be accomplished with styles.There are a couple of ways that you can achieve this feature. Since the area that has the navigation has an ID of nav, we can use something like:
#nav a:link {
text-decoration:none;
background-color:#fff8dc;
color:#dc143c;
font-weight:normal;
}
#nav a:visited {
background-color:#fff8dc;
color:#dc143c;
font-weight:normal;
text-decoration:none;
}
#nav a:hover {
background-color:#fff8dc;
color:#dc143c;
font-weight:normal;
}
#nav a:active {
text-decoration:none;
background-color:#fff8dc;
color:#dc143c;
font-weight:normal;
}
In the <body> of the HTML code, the styles are applied to the <td> element with the nav ID:
<td id="nav">
Keep in mind that if you use ID, it can only be used once on the web page. If you need to reference a style multiple times, use class.
For the footer, I created
a.footer:link {
color:#000;
font-size:.8em;
font-weight:normal;
}
a.footer:visited {
color:#000;
font-size:.8em;
text-decoration:underline;
font-weight:normal;
}
a.footer:hover {
color:#000;
font-size:.8em;
font-weight:normal;
}
a.footer:active {
color:#000;
font-size:.8em;
font-weight:normal;
}
Then in the <body> where these links are, I added the class footer to the <a> element
<a href="/default.asp" class="footer">Home</a>
Since there were three <a> elements on this web page, I needed to use class instead of an ID.
Source code: Text file (749 bytes) / Zipped file (all files (txt, css, html) 4,727 bytes)
Don't
forget, with Microsoft Expression Web, if you have the Manage Styles Task Pane
opened, you can preview your style very easily. This will help to ensure
that you have the correct syntax as soon as any changes or additions to the
style is done. If you do not see this Task Pane, go to Task Panes and
Manage Styles. The Task Pane should appear and if needed, you can move the
pane to another area of Expression Web.
Comments
