The easiest way to style a link is to use the anchor type selector. For instance, this rule will make all anchors red:

a {color: red;}

However, anchors can act as internal references as well as external links, so using a type selector is not always ideal. Take this situation, for example. The first anchor contains a fragment identifier, and when the user clicks that anchor, the page will jump to the second named anchor:

<p><a href="#mainContent">Skip to main content</a></p>
...
<h1><a name="mainContent">Welcome</a></h1>

While you probably only want the link to be styled red, the contents of the headline will be styled red also. To avoid this, CSS has two special selectors called link pseudo-class selectors. The :link pseudo-class selector is used to target links that have not been visited, and the :visited pseudo-class selector is used to target visited links. In this example, all unvisited links will be blue, and all visited links will be green:

a:link {color: blue;}      /* Makes unvisited links blue */
a:visited {color: green;}  /* Makes visited links green */

The other two selectors you can use for styling links are the :hover and :active dynamic pseudo-class selectors. The :hover dynamic pseudo-class selector is used to target elements when they are hovered over, and the :active dynamic pseudo-class selector targets elements when they are activated. In the case of links, activation occurs when the link is clicked. In this example, links will turn red when hovered over or clicked:

a:hover, a:active { color: red;}

To ensure your pages are as accessible as possible, it is always a good idea to add a :focus pseudo-class to your links when defining hover states. This will allow your links to take on the same styles when they are tabbed to using the keyboard as they have when hovered over using the mouse.

a:hover, a:focus { color: red;}

Other elements can also use the :hover, :active, or :focus pseudo-class selectors. For instance, you could add a :hover pseudo-class on your table rows, an :active pseudo-class on your submit buttons, or a :focus pseudo-class on your input fields to highlight various forms of interactivity. Unfortunately, IE 7 and below don't support the use of pseudo-class selectors on anything other than links, but all modern browsers do.

/* makes table rows yellow when hovered over */
tr:hover {
  background: yellow;
}


/* makes submit buttons in some browsers yellow when pressed */
input[type="submit"]:active {
  background:yellow;
}

/* makes inputs yellow when selected */
input:focus {
  background:yellow;
}

One of the first things most people learn to use these selectors for is turning off the underline for links, and then turning them back on when they are hovered over or clicked. This can be done by setting the text-decoration property to none for unvisited and visited links and to underline for hovered or active links:

a:link, a:visited {text-decoration: none;}
a:hover, a:focus, a:active {text-decoration: underline;}

In the previous example, the order of the selectors is very important. If the order is reversed, the hover and active styles won't work.

a:hover, a:focus, a:active {text-decoration: underline;}
a:link, a:visited {text-decoration: none;}

The reason for this is the cascade. In Chapter 1, you learned that when two rules have the same specificity, the last rule to be defined wins out. In this situation, both rules have the same specificity so the :link and :visited styles will override the :hover and :active styles. To make sure this doesn't happen, it's a good idea to apply your link styles in the following order:

a:link, a:visited, a:hover, a:focus, a:active

An easy way to remember this order is the phrase "Lord Vader Hates Furry Animals," where L stands for link, V stands for visited, H for hover, F for focus, and A for active.

From a usability and accessibility standpoint, it is important that your links are distinguishable by some means other than color. The reason for this is that many people with visual impairments find it difficult to distinguish between poorly contrasting colors, especially at small text sizes. For instance, people with color blindness cannot distinguish between certain color combinations with similar levels of brightness or saturation. Because of this, links are underlined by default.

a:link, a:visited {
  text-decoration: none;
  font-weight: bold;
}

a:hover, a:focus, a:active {
  text-decoration: underline;
  font-weight: bold;
}

a:link, a:visited {
  text-decoration: none;
  border-bottom: 1px dotted #000;
}


a:hover, a:focus, a:active {
  border-bottom-style: solid;
}

Fancy link underlines

You can create some very interesting effects by using images to create your link underlines. For instance, I have created a very simple underline graphic comprised of diagonal lines (see Figure 5-1).

Figure 5.1. Simple underline graphic

You can then apply this image to your links using the following code:

a:link, a:visited {
  color:#666;
  text-decoration: none;
  background: url(/img/underline1.gif) repeat-x left bottom;
}

You can see the resulting styled link in Figure 5-2.

Figure 5.2. Custom link underline

You do not have to stop with link and visited styles. In this example, I have created an animated GIF for the hover and active states, which I apply using the following CSS:

a:hover, a:focus, a:active {
  background-image: url(/img/underline1-hover.gif);
}

When you hover over or click the link, the diagonal lines appear to scroll from left to right, creating an interesting pulsing or poling effect. Not all browsers support background image animations, but those that do not will usually display the first frame of the animation, ensuring that the effect degrades nicely in older browsers.

Note

Remember to use animation carefully, as it can cause accessibility problems for some users. If in doubt, always remember to check the Web Content Accessibility Guidelines (WCAG 1.0) at www.w3.org/TR/WAI-WEBCONTENT.

Designers and developers often forget about the visited-link style and end up styling visited links the same as unvisited ones. However, a separate visited-link style can help orientate users, showing them which pages or sites they have already visited and avoiding unnecessary backtracking.

You can create a very simple visited-link style by adding a check box to every visited link:

a:visited {
  padding-right: 20px;
  background: url(/img/check.gif) no-repeat right middle;
}

As well as linking to a specific document, you can use a link containing a fragment identifier to point people to a particular part of a page. You do this by adding a hash character, followed by the ID of the element you want to link to, at the end of your href. This can be extremely useful if you want point to a specific comment in a long comment thread. For instance, say I wanted to link to the third comment on this page.

<a href="http://example.com/story.htm#comment3">
   A great comment by Simon
</a>

When you click the preceding link, you will be taken to the appropriate document, and the page will scroll down to the comment3 element. Unfortunately, if the page is quite busy, it is often difficult to tell to which element the link has sent you. To get around this problem, CSS 3 allows you to style the target element using the :target pseudo-class. In this next example, I am going to highlight the target element by giving it a yellow background (see Figure 5-3).

.comment:target {
  background-color: yellow;
}

Figure 5.3. The third comment is highlighted with a yellow background when linked to, thanks to the :target selector.

If you wanted to be even cleverer, you could choose to give the element an animated background image that fades from yellow to white, thus simulating the yellow fade technique popularized by companies like 37 Signals.

.comment:target {
  background-image: url(img/fade.gif);
}

The target selector is supported by all recent versions of Safari and Firefox, but isn't supported by Internet Explorer at the time of writing.

On many sites, it is difficult to tell if a link points to another page on that site or to a different site altogether. We have all clicked a link expecting it to go to another page in the current site, only to be whisked away somewhere different and unexpected. To combat this problem, many sites will open external links in a new window. However, opening a new window is not a good idea as doing so takes control away from the user and potentially litters the desktops with unwanted windows. This can also cause problems for users of screen readers if the new window is not announced. Furthermore, new windows effectively break the back button, as it is impossible go back to the previous screen.

A better solution would be to indicate external links somehow and let the user decide to leave the site, open the link in a new window, or more probably these days, open it in a new tab. You can do this by adding a small icon next to any external links. Sites like www.wikipedia.com already do this, and an icon convention for offsite links has started to appear: a box with an arrow (see Figure 5-4).

Figure 5.4. External link icon

The easiest way to include an external link icon on your page is to add a class to any external links and apply the icon as a background image. In this example, I have created space for the icon by giving the link a small amount of right padding and then applied the icon as a background image at the top right of the link (see Figure 5-5).

.external {
  background: url(/img/externalLink.gif) no-repeat right top;
  padding-right: 10px;
}

Figure 5.5. External link styling

Although this method works, it is not a particularly smart or elegant way of doing things, as you have to manually add your class to each external link. What if there was a way to get CSS to determine whether something was an external link for you? Well, in fact there is: using attribute selectors.

As you learned in Chapter 1, attribute selectors allow you to target an element based on the existence or value of an attribute. CSS 3 extends the ability with substring matching. As the name suggests, these selectors allow you to target an element by matching your chosen text to part of the attribute's value. CSS 3 is not an official specification yet, so using these advanced selectors may invalidate your code. However, the majority of standards-compliant browsers support these nifty CSS 3 selectors.

This technique works by first targeting any links that start with the text http: using the [att^=val] attribute selector:

a[href^="http:"] {
  background: url(/img/externalLink.gif) no-repeat right top;
  padding-right: 10px;
}

This should highlight all external links. However, it will also pick up internal links using absolute rather than relative URLs. To avoid this, you need to reset any links to your own site by removing the external link icon. This is done by matching links that point to your domain name, removing the external link icon, and resetting the right padding (see Figure 5-6).

a[href^="http://www.yoursite.com"],
a[href^="http://yoursite.com"]  {
  background-image: none;
  padding-right: 0;
}

Figure 5.6. A page showing external links styled differently from internal ones

Most modern browsers support this technique, but older browsers such as IE 6 and below will simply ignore it.

If you like, you could extend this technique to highlight email links as well. In this example, I am adding a small email icon to all mailto links:

a[href^="mailto:"] {
  background: url(img/email.png) no-repeat right top;
  padding-right: 10px;
}

You could even highlight nonstandard protocols such as the AOL instant messaging protocol (AIM), with a little AIM buddy icon (see Figure 5-7):

a[href^="aim:"] {
  background: url(img/im.png) no-repeat right top;
  padding-right: 10px;
}


<a href="aim:goim?screenname=andybudd">instant message</a>

Figure 5.7. Email and instant message link styles

a[href$=".pdf"] {
  background: url(img/pdfLink.gif) no-repeat right top;
  padding-right: 10px;
}


a[href$=".doc"] {
  background: url(img/wordLink.gif) no-repeat right top;
  padding-right: 10px;
}

a[href$=".rss"], a[href$=".rdf"] {
  background: url(img/feedLink.gif) no-repeat right top;
  padding-right: 10px;
}

Anchors are inline elements, which means they only activate when you click the contents of the link. However, there are instances when you may want to create more of a button-like effect with a larger clickable area. You can do this by setting the display property of the anchor to block and then changing the width, height, and other properties to create the style and hit area you desire.

a {
  display: block;
  width: 6.6em;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  border: 1px solid #66a300;
  background-color: #8cca12;
   color: #fff;
}

The resulting link should now look like Figure 5-8.

Figure 5.8. Link styled like a button

With the link now displaying as a block-level element, clicking anywhere in the block will activate the link.

If you look at the CSS, you'll see that the width has been explicitly set in ems. By their nature, block-level elements expand to fill the available width, so if the width of their parent elements were greater than the required width of the link, you would need to apply the desired width to the link. This would likely be the case if you wanted to use such a styled link in the main content area of your page. However, if your styled links were going in a sidebar, for example, you would probably just set the width of the sidebar and not worry about the width of the links.

You may wonder why I am using line-height to control the height of the button instead of height. Well, this is actually a handy little trick for centering the text in the button vertically. If you were to set a height, you would probably have to use padding to push the text down and fake vertical centering. However, text is always vertically centered in a line box, so by using line-height instead, the text will always sit in the middle of the box. There is one downside, though. If the text in your button wraps onto two lines, the button will be twice as tall as you want it to be. The only way to avoid this is to size your buttons and text in such a way that the text won't wrap, or at least won't wrap until your text size has been increased beyond a reasonable amount.

If you choose to use this technique, make sure that you only use it on things that are actually links and don't update the server. Otherwise, you may experience some undesirable results. When Google accelerator launched, people found that content in their CMS or web application was mysteriously disappearing. Sometimes, the entire contents of a site would vanish overnight. It turns out that the authors of these tools had used anchor links rather than form elements for their delete buttons. Google accelerator would spider these links in order to cache them and inadvertently delete the content! Search engines spiders can have the same effect, recursively deleting vast swathes of data. For that reason, you should never use links to make changes on the server. Or to put it in technical terms, links should only ever be used for GET requests, and never for POST requests.

Simple rollovers

In the bad old days, people used large and overly complicated JavaScript functions to create rollover effects. Thankfully, using the :hover pseudo-class allows us to create rollover effects without the need of JavaScript. You can extend the previous example to include a very simple rollover effect simply by setting the background and text color of the link when hovered over (see Figure 5-9):

a:hover,
a:focus {
  background-color: #f7a300;
  border-color: #ff7400;
}

Figure 5.9. Hover style showing active area

Rollovers with images

Changing background colors works well for simple buttons, but for more complicated buttons, you will probably want to use background images. For the next example, I have created three button images: one for the default state, one for the hover and focus states and one for the active state (see Figure 5-10).

Figure 5.10. Images for the normal, hover, and active button states

The code for this example is very similar to the preceding example. The main difference is that background images are being used instead of borders and background colors.

a:link, a:visited {
  display: block;
  width: 203px;
  height: 72px;
  text-indent: −1000em;
  background: url(/img/button.png) left top no-repeat;
}


a:hover, a:focus {  background-image: url(/img/button-over.png);
}


a:active {
  background-image: url(/img/button-active.png);
}

This example uses fixed-width and fixed-height buttons, which is why I have set explicit pixel dimensions in the CSS. To get the exact text treatment I wanted, I have included the button text on the graphic and then hidden the anchor text off the screen with a large negative text indent. However, there is nothing to stop you from creating oversized button graphics or using a combination of background colors and images to create a fluid or an elastic button.

Pixy-style rollovers

The main drawback with the multiple image method is a slight delay as browsers load the hover image for the first time. This can cause an undesirable flickering effect and make your buttons feel a little unresponsive. It is possible to preload the hover images by applying them as a background to the parent element. However, there is another way. Instead of swapping in multiple background images, use a single image and switch its background position instead. Using a single image has the added benefit of reducing the number of server requests as well as allowing you to keep all your button states in one place. This method is known as the Pixy method after the nickname of its creator, Petr Staníček (you can find more information at his website: http://wellstyled.com/css-nopreload-rollovers.html).

Begin by creating your combined button image (see Figure 5-11). In this case, I am limiting the button to an up state, an over state, and an active state. However, you could also include a visited state if you desired.

Figure 5.11. All three button states as a single image

The code is almost identical to the previous example. However, this time, you align the background image so the normal state is in the center and then shift the background to the right or left for the hover and active states.

a:link, a:visited {
  display: block;
  width: 203px;
  height: 72px;
  text-indent: −1000em;
  background: url(/img/buttons.png) −203px 0 no-repeat;
}


a:hover, a:focus {
  background-position: right top;
}


a:active {
  background-position: left top;
}

Unfortunately, Internet Explorer still makes a round-trip to the server to request a new image, even though all you are doing is changing the alignment of the image. This causes a slight flicker, which can be a little annoying. To avoid the flicker you need to apply the rollover state to the link's parent element, for example, its containing paragraph.

p {
  background: url(/img/ buttons.png)

  no-repeat right top;
}

The image will still disappear for an instant while it is being reloaded. However, during this time, the same image will be revealed underneath, hiding the flicker.

An alternate way to remove the flicker is to include the following line of code in your Internet Explorer specific CSS file, which turns background caching on.

html {
   filter: expression(document.execCommand("BackgroundImageCache",

false, true));
}

CSS sprites

Multiple requests to the server can have a dramatic effect on the performance of your site, so the Pixy method aims to reduce the number of requests by including all your button states in a single image. But why stop there? Why not go one step further and include all your icons or even your site navigation in a single image? That way, you could reduce the number of calls to the server from multiple figures to just two or three. This is exactly what CSS sprites are—a single image containing a multitude of different icons, buttons, or other graphics. Many large websites use this technique including the Yahoo! homepage. In fact, we use the same technique for the Clearleft site navigation (see Figure 5-12).

#nav li a {
  display: block;
  text-indent: −9999px;
  height: 119px;
  width: 100px;
  background-image: url('/img/nav.png'),
  background-repeat: no-repeat;
}


#nav li.home a,
#nav li.home a:link,
#nav li.home a:visited {
  background-position: 0 0;
}

#nav li.home a:hover,
#nav li.home a:focus,
#nav li.home a:active {
  background-position: 0 −119px;
}


#nav li.who-we-are a,
#nav li.who-we-are a:link,
#nav li.who-we-are a:visited {
    background-position: −100px 0;
}
#nav li.who-we-are a:hover,
#nav li.who-we-are a:focus,
#nav li.who-we-are a:active {
  background-position: −100px −119px;
}

Figure 5.12. The CSS sprites file we use on the Clearleft site

By using this technique, you can cut down on the requests the web browser makes to your server, considerably speeding up the download times. Furthermore, using sprites keeps all your buttons, icons, and miscellaneous graphics in one location, improving maintainability. So it's a win-win situation.

Rollovers with CSS 3

CSS 3 includes a number of properties like text-shadow, box-shadow, and border-radius that make it possible to create heavily styled buttons that require no images whatsoever. To create such a button, I will start with the code from our first example:

a {
  display: block;
  width: 6.6em;
  height: 1.4em;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  border: 1px solid #66a300;
  background-color: #8cca12;
  color: #fff;
}

Next, I'll add curved borders and a drop shadow. I'm also going to give the button text a subtle drop shadow (see Figure 5-13).

a {
  display: block;
  width: 6.6em;
  height: 1.4em;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  border: 1px solid #66a300;
   -moz-border-radius: 6px;
   -webkit-border-radius: 6px;
   border-radius: 6px;
  background-color: #8cca12;
   color: #fff;
  text-shadow: 2px 2px 2px #66a300;
  -moz-box-shadow: 2px 2px 2px #ccc;

-webkit-box-shadow: 2px 2px 2px #ccc;
  box-shadow: 2px 2px 2px #ccc;
}

Figure 5.13. A rounded corner button using only CSS

To re-create the gradient, Safari 4 beta supports a proprietary value called -webkit-gradient. While I would never normally recommend the use of proprietary code, this may provide a hint of where CSS is heading in the future. This proprietary value takes a number of different arguments including the type of gradient (liner or radial), the direction of the gradient (in this case, top-left to bottom-left), a starting color, an end color, and any stops along the way. Obviously, if you didn't want to use this proprietary code, you could simply produce your own background image gradient instead.

a {
  display: block;
  width: 6.6em;
  height: 1.4em;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  border: 1px solid #66a300;
  -moz-border-radius: 6px;
   -webkit-border-radius: 6px;
   border-radius: 6px;
  background-image: -webkit-gradient(linear, left top, left bottom, 

from(#abe142), to(#67a400));
  background-color: #8cca12;
   color: #fff;
  text-shadow: 2px 2px 2px #66a300;
  -moz-box-shadow: 2px 2px 2px #ccc;
  -webkit-box-shadow: 2px 2px 2px #ccc;

box-shadow: 2px 2px 2px #ccc;
}

Last, Safari includes another proprietary property called box-reflect, which as the name suggests, allows you to create reflections of an object. This property contains a number of different arguments including the position and distance of the reflection along with a masking image. Interestingly, you can use the –webkit-gradient value to automatically generate this mask. In this instance, I'm positioning the reflection 2 pixels below the button and using a mask that fades to white (see Figure 5-14).

a {
display: block;
width: 6.6em;
  height: 1.4em;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  border: 1px solid #66a300;
   -moz-border-radius: 6px;
   -webkit-border-radius: 6px;
   border-radius: 6px;
  background-image: -webkit-gradient(linear, left top, left bottom, 

from(#abe142), to(#67a400));
  background-color: #8cca12;
   color: #fff;
  text-shadow: 2px 2px 2px #66a300;
  -moz-box-shadow: 2px 2px 2px #ccc;
  -webkit-box-shadow: 2px 2px 2px #ccc;
  box-shadow: 2px 2px 2px #ccc;
  -webkit-box-reflect: below 2px -webkit-gradient

(linear, left top, left bottom, from(transparent),

color-stop(0.52, transparent), to(white));
}

Figure 5.14. A rounded corner button using Safari specific extensions to CSS

There is some debate around whether these types of effects should be done using CSS or not, so it's uncertain if they will ever make it into the official specification. Because of this and the lack of cross-browser support, it would be unwise to use these techniques in a production environment. However, that shouldn't stop you from playing around with them on your personal sites just as long as you realize that they're invalid CSS and may get removed or changed in future versions of the browser.

Tooltips are the little yellow text boxes that pop up in some browsers when you hover over elements with title tags. Several developers have created their own custom, stylized tooltips using a combination of JavaScript and CSS. However, it is possible to create pure CSS tooltips by using CSS positioning techniques. This technique requires a modern, standards-compliant browser like Firefox to work properly. As such, it is not a technique you would add to your day-to-day arsenal. However, it does demonstrate the power of advanced CSS and gives you a hint of what will be possible when CSS is better supported.

As with all of the examples in this book, you need to start with well-structured and meaningful HTML:

<p>
   <a href="http://www.andybudd.com/" class="tooltip">
Andy Budd<span> (This website rocks) </span></a> is a web developer based in

Brighton England.
</p>

I have given the link a class of tooltip to differentiate it from other links. Inside the link, I have added the text I wish to display as the link text, followed by the tooltip text enclosed in a span. I have wrapped my tooltip text in brackets so that the sentence still makes sense with styles turned off.

The first thing you need to do is set the position property of the anchor to relative. This allows you to position the contents of the span absolutely, relative to the position of its parent anchor. You do not want the tooltip text to display initially, so you should set its display property to none:

a.tooltip {
  position: relative;
}


a.tooltip span {
  display: none;
}

When the anchor is hovered over, you want the contents of the span to appear. This is done by setting the display property of the span to block, but only when the link is hovered over. If you were to test the code now, hovering over the link would simply make the span text appear next to the link.

To position the contents of the span below and to the right of the anchor, you need to set the position property of the span to absolute and position it 1 em from the top of the anchor and 2 ems from the left.

a.tooltip:hover span {
  display: block;
  position: absolute;
  top: 1em;
  left: 2em;
}

And that's the bulk of the technique. All that is left is to add some styling to make the span look more like a tooltip. You can do this by giving the span some padding, a border, and a background color:

a.tooltip:hover span, a.tooltip:focus span {
  display:block;
  position:absolute;
  top:1em;
  left:2em;
  padding: 0.2em 0.6em;

border:1px solid #996633;
  background-color:#FFFF66;
  color:#000;
}

In Firefox, the applied technique should look something like Figure 5-15.

Figure 5.15. Pure CSS tooltip

In this chapter, you have learned how to style links in a variety of ways. You now know how to style links depending on the site or file they link to, and you can make links behave like buttons and create rollover effects using colors or images. You can even create advanced effects such as pure CSS tooltips.

In the next chapter, you will learn how to manipulate lists, and using the information you have learned in this chapter, create navigation lists, pure CSS image maps, and remote rollovers. Let the fun begin!