|
CSS Tip:
Linking With Style
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
Want to change the standard link colors on your site, remove the underlines, or highlight links so they really stand out? You can do all that - and more - with cascading style sheets (CSS). But be careful. Too much innovation can confuse your visitors.
Types Of Links
Most sites contain several different types of links: mailto, informational, and navigational links are the most common.
- Mailto links allow visitors to communicate with your via email. Visitors need this ability to ask questions and report problems, but be very careful because human visitors aren't the only people who use them. Email spiders are often even more eager than visitors to find your email address, so consider hiding your email address from them using HTML, JavaScript, or a CGI script.
- Use information links to send visitors to cited articles, more in-depth information, or to external Web sites. Information links are what make the Internet truly valuable for searchers because they link sites together in a web-like design.
- Navigation links give your visitors a roadmap to navigate through your site. Their complexity can range from simple text links to a complex image map. Every multi-page site has to use some form of navigation links. Large, complex sites often display navigation links in several different ways, using attractive image maps, text links for increased accessibility, and navigation trees to define the site's structure.
|
Neat Tricks With CSS
Visitors have certain expectations when they visit Web sites. One of the most deeply ingrained is that text links are underlined and colored either blue or red. Be sure you have a good reason to deviate from this standard! If you stray too far from standard link colors and presentation, visitors may get confused and leave your site.
Only change style definitions if the change makes your site more attractive and your links easier to locate and understand.
Here's a sample style definition with each segment discussed in order. It goes inside the BODY section of your document.
<STYLE>
A:hover {background:yellow;
color:black; font-weight:bold}
A:visited {color:green}
A:active {color:red}
A:link {color:purple}
</STYLE> |
- Hover: This attribute only works with Explorer and Netscape 6.x, but it's a neat effect that won't break anything in non-supporting browsers. Hover is similar to the onMouseOver event in JavaScript. When a visitor moves the mouse over the link, the appearance of the link changes.
- Visited: Sets the appearance of links that have already been visited.
- Active: Changes the appearance of links when they're clicked.
- Link: Sets the appearance of links that haven't been visited or aren't in use.
|
Browser Compatibility And Usability Issues
Style sheets help you customize your site, control page layout, reduce the amount of code you have to write, and maintain it more easily. But they can be dangerous too, giving you the illusion of control, more than real control over your page display.
That's because browser support for style sheets is spotty. It varies even between different versions of the same browser. Netscape is by far the most picky; even small errors can break your page display.
This style definition is a good example:
<STYLE>
A:link {font-weight:bold}
A:hover {background:yellow; color:black;}
A:visited {color:green}
A:active {color:red}
</STYLE> |
In IE browsers and NS 6.x, unvisited links are in bold, while other links aren't. However, in NS 4.x browsers, all the links are bold because they inherit the bold property from the first style definition. Since bold type displays larger, this difference may look unattractive on your page - or break the page layout if you're really unlucky.
You need to thoroughly test your pages in as many browsers and browser versions as possible before you post them and after you make major changes. Since even a small HTML error can break your page display, use NetMechanic's HTML Toolbox to find coding errors and browser-specific tags. Then let Browser Photo test your page layout in 16 different browsers, browser versions, operating systems, and screen resolution combinations.
|
