CSS links – different formats
Written by: Jan
Using different CSS classes for links is quite easy, but many newbie webmasters don’t know what exactly to do. So they end up with using the font tag within the a tags, or they use span tags instead of going the easy (and correct) route. The solution is this:
Say that in the source code of your website (XHTML) you are going to link to web-developers.net, but you want to differentiate the link from all other links. To do this, you should use this:
<a href="http://www.web-developers.net" target="_blank" class="external_link_1">web-developers.net</a>
Of course, assume that the class external_link_1 has not yet been defined in the CSS file. Now, add these lines
a:link.external_link_1
{
color: #105286;
text-decoration: none;
}
a:active.external_link_1
{
color: #105286;
text-decoration: none;
}
a:visited.external_link_1
{
color: #105286;
text-decoration: none;
}
a:hover.external_link_1
{
color: Black;
text-decoration: underline;
}
This does the work for you. You can modify the layout of such links by adding/modifying the external_link_1 CSS class. Before I mention the most used CSS properties, make sure that your XHTML file links to the CSS file. This can be done by placing the following code between <head> and </head> tags:
<link rel="stylesheet" href="./style.css" type="text/css" />
The CSS properties I use most often for links are:
font-family, font-style, font-size, color, text-decoration. However, there are many more available than these. This link is particularly useful.
Sponsored links
Where is the social media opportunity in your organisation?
...And Web Developers
WANTED: Web Designers
Technical Project Managers step forward.
How agencies help brands with "social"