Tag: CSS

The Many Faces of the Hyperlink

The World Wide Web is built on links. It thrives because links are everywhere. There are links to the various pages on individual sites. There are links from one site to another. There are links in e-mails to websites. There are links in PDFs and documents and presentations to Web pages. Chances are, you used a link to get to this article. Yet, when it comes to setting up a website, styling and consideration of links is often overlooked. Or worse, specific choices for links are made that end up hurting the usability and interaction of your website.

Link states and their selectors

A link isn’t just an element with one look. It has five different states that can be styled with CSS (and to some degree basic HTML, but you should be separating your styling from your content). Here are the different link states and their associated CSS selectors.

a:link
The link state is the basic state for a link. It’s the blue, underlined text default. A link that hasn’t had and isn’t currently having any action on it should look like this.
a:hover
The hover state is what happens when you move your mouse over a link. Typically, this involves a change in color or decoration. The mouse cursor also changes.
a:focus
Perhaps the most often overlooked state, the focus state is to keyboard navigability what the hover state is to mouse users. When a link is focused on using the keyboard, or after being clicked, it will use the definitions of this state to style it. Default styling generally puts a dotted outline around the element.

You can change the color, style and width of dotted outline (or remove it altogether, although that’s not recommended) in CSS with the outline property (ex. outline: #f00 solid thick;). In newer browsers, other elements can have outlines as well (allowing for double borders), although IE will only display an outline on links only.

a:active
The active state controls how the link appears right after being clicked (while the action is taking place, such as requesting a new page). This gives feedback to the user that their click was registered by the browser, and that something is happening, even if it isn’t readily apparent. The default for this is typically a red text color.
a:visited
If a user has viewed the destination page, the link is considered visited. This is important feedback for the user so that they can know which pages on your or external sites they’ve already seen, thus not needing to click on the link. Default styling of visited links usually colors the link an eggplant or dark purple color.

Each one of these selectors should have a different style. Why? It’s all about usability.

Usability

The Internet as we know it—that is, the one available to the public—was born right around 1992. That was 18 years ago. (Think about it, the majority of students in this year’s incoming college freshman class were born that same year.) In that time, visitors have come to expect certain things on the Web. For instance, what is the first thing that comes to mind when you see blue, underlined text? You said “a link,” didn’t you. Blue, underlined text has become synonymous with a hyperlink. People see it, instantly recognize “ooh, a link!”, then click on it if they think it looks interesting to them. They die a little inside if it doesn’t do anything. They rejoice if it takes them to another page. That is usability.

Usability: the ease with which a visitor can accomplish basic tasks on your site. Navigation is the most basic task on the web, after reading content.

If you’re only willing to put a minimum amount of consideration into link styling in your design or development, the best thing you can do is don’t do anything to the browser defaults. Ok, so maybe those colors would be a little difficult to read on say, a black background, but at least users would understand that they’re links.

Users need to know four basic things:

  1. Specific text is actionable (that is, it is a link)
  2. They are hovering or focusing on it (taking action will do something and they’re clicking on what they intend to)
  3. Something is happening once they’ve clicked on it
  4. Whether they’ve already seen the destination

If your link looks like plain text, no one is going to try to click on it. They don’t have any cues to know that they can take action.

If your link doesn’t change when the visitor is hovering or focusing (via keyboard), they can’t be sure that when they click (or hit enter) something is going to happen. What if they do click but cause something else to happen? That’s bad usability. These two states (hover and focus) are perhaps the only two that I can consider ok to have the exact same styling. Both states indicate that pressing a button (on the mouse or keyboard) will activate the link. If you remove the default outline for the focus state, make sure to do something else that makes it very obvious to a keyboard user that the link is being focused on. Some browsers, like older versions of Opera don’t do anything with the focus state, and others, like IE6, end up meshing focus and active together, so having slight differences between hover and focus might be best for browsers that get confused.

If nothing immediately happens when a user clicks, they might think they missed the link or it is broken. They need feedback to know something is happening in the background, especially if it takes a noticeable amount of time to request the new page.

If they’ve seen a page on the site already, they might not want to visit it again right now. Or, if they’re clicking on various links to read after they’ve finished scanning your content, they might want to know if two links go to the same location. If your visited links look exactly the same as unvisited links, users have no indication of this. Give them some.

Consistency

I’m sure plenty of Web designers are cursing at me right now about stifling their creativity, saying “that color scheme looks like total dog-poo with my design.” And I totally understand that sentiment. You can style your links differently than the browser defaults. I do it. But if you do, at least keep it consistent.

If links on your website are say, bold orange text with no underline, people will probably pick up on the fact that bold orange text with no underline are the links on your site. But if you also use bold orange text for some other type of emphasis, people will be confused when they try to click and nothing happens. Or if another link is suddenly italic red text with an underline, they might think they’ve visited the link, or it’s not a link, or who knows what. It’s unlikely that they’ll click on it. Consistency is key. If you want your users to memorize a new paradigm, make sure you always use your new paradigm.

And please, for the sake of all things holy and unholy, don’t use blue, underlined text unless it is a link. (Or if you are a sadistic developer who takes pleasure in frustrating and confusing your users.)

Exceptions to the rule

There are always exceptions to the rule. The major one here has to do with in-site navigation. Obvious site navigation, like menus and footer links can be styled differently than normal hyperlinks. If users expected your navigation to be blue underlined text, the Internet would be a far more homogeneous place, and that would be boring. When you have obvious menus, your users are going to understand that those are links to other pages in your site. But when you have links within your content, they need to know immediately that they are looking at a link.

A side rule to this: don’t link to external sites from your site navigation without clear indication of what is happening. That is really jarring, and a good way to get people away from your website so that they don’t come back. Site nav links should almost never open in a new page, either.

What link styling strategies have you found work best for you?

CSS Shorthand: an Introduction

One of the things I see most often in beginners’ CSS is an utter lack of shorthand for style declarations. The cause may be that their existence is never mentioned in basic CSS tutorials, or that they’re never discussed in-depth enough for new developers to feel comfortable using them. Or, in some cases, simple ones are used without understanding exactly what is going on. I honestly don’t know why, but hopefully I can clear up some of their mystique so that these handy bits of code can be useful to all and sundry.

Attributes that can use shorthand

This is not an entirely comprehensive list of attributes that can be shortened, merely an overview of the most common. As more and more CSS2 and CSS3 properties are supported by modern browsers, the list of shorthand-capable attributes grows (border-radius and CSS columns come to mind). This should get you started, however. If you find yourself using a set of attributes that you think might have shorthand, I’m sure a quick Web search will pull up more information.

N.B. in most cases, if you leave out a value, the browser will use the default value for that attribute. I’ll let you know if that’s not true.

Hex RGB colors

This isn’t exactly a shorthand attribute, but did you know you can shorten hex colors if their RGB pairs match? So, instead of typing out #FFFFFF, you can shorten it to #FFF (or #fff—it’s case insensitive). It also works for something like #990000=#900, etc. Basically, anything formed as #xxyyzz. #499223 or something like it cannot be shortened.

margin/padding/border-width/outline-width

I’ve combined these all into a single heading because they work in the same way: each one takes between 1-4 size specifications and applies that measurement to the appropriate side. For declarations with multiple specifications, they order clockwise from the top So, how does it work?

  1. margin: 10px; (all)

    All sides are given the measurement.

  2. padding: 1em .5em; (top/bottom right/left)

    Measurements are assigned in top/bottom, right/left pairs. The top and bottom measure 1em while the right and left measure .5em.

  3. border-width: 1px 0 3px; (top right/left bottom)

    Three measurements are defined, with the right/left sharing. The top measures 1px, the right and left have no visible border and the bottom measures 3px.

  4. margin: 10px 5px 0 30px; (top right bottom left)

    Each side has a different measurement. The top measures 10px, the right measures 5px, the bottom has no margin and the left measures 30px.

That definitely saves time and bytes over:

margin-top: 10px;
margin-right: 5px;
margin-bottom: 0;
margin-left: 30px;

padding-top: 1em;
padding-right: .5em;
padding-bottom: 1em;
padding-left: .5em;

border-top-width: 1px;
border-right-width: 0;
border-bottom-width: 3px;
border-left-width: 0;

N.B. This is one case where leaving off a value doesn’t go to a default; it changes the functionality.

border

The border property is one of the better-known shorthands. I often see border: none; used, which is a very comprehensive bit of shorthand. We discussed the shorthand way to declare border-width above, but we can go even further with shorthand:

border: #00f dotted 2px; (color style width)

In the above case, we end up with a dotted 2px blue border all the way around. But what if you want to have only a top and bottom border, like in the border-width example? You can combine the two:

border: #00f dotted;
border-width: 2px 0;

Remember that leaving off a value will generally result in the browser using the default. In this case, after the first declaration, the border-width is set to a default size, which the second line overrides by giving it an explicit width for the top and bottom.

The border properties have a sort of medium-level shorthand as well, which you see with border-width. You can further expand by declaring border-top-width, etc. border-color and border-style can be used in the same clock-wise manner as border-width, allowing you to provide 1-4 specifications. For instance:

border-color: red blue yellow;
border-style: dotted dashed solid double;

The above follows the same ordering principles as border-width: top right bottom left.

Without the various levels of shorthand, for even just a simple 1px solid red border you would have to declare the following:

border-top-color: red;
border-top-style: solid;
border-top-width: 1px;
border-right-color: red;
border-right-style: solid;
border-right-width: 1px;
border-bottom-color: red;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: red;
border-left-style: solid;
border-left-width: 1px;

N.B. Despite the fact that they begin with border-, border-spacing and border-collapse are not part of the border shorthand, as they pertain solely to tables, not other elements.

font

The font shorthand allows you to set some of the font-related properties of an object. In fact, one of the first lines of CSS on any site I develop looks something like:

font: 90%/1.5 Arial;

That is font shorthand at its most usefully condensed state (you could remove line-height—a font-size of 90% (percentage of the parent), a line-height of 1.5 (1.5x the font-size, so ~135%), and a font-family of Arial. Note the slash between font-size and line-height. It’s an important part of the syntax.

You can further enhance your shorthand by adding font-style, font-variant and/or font-weight to the beginning of your declaration. An extremely styled declaration might then look like:

font: italic small-caps bold 110%/2  "Adobe Garamond Pro", Garamond, "Apple Garamond",
                "Palatino Linotype", Palatino, Georgia, serif;

In addition to setting the font-family the font shorthand allows you to set the font using system settings—something that isn’t possible with font-family. The available system settings are:

  • caption
  • icon
  • menu
  • message-box
  • small-caption
  • status-bar

I don’t have much experience using these settings, so your mileage may vary. If you have experience, tell us more about it in the comments, if you don’t mind.

N.B. using the font shorthand will reset any earlier or inherited declarations, rather than using the inherited property it will reset things to normal or the system font.

All other properties relating to text, such as color, must be set long-hand, but regardless, font is still faster than typing out:

font-family: Arial;
font-size: 90%;
line-height: 1.5;
font-style: italic;
font-variant: normal;
font-weight: bold;

background

There’s a lot more to setting a background than just color or image, but the background property makes it easy. Rather than typing out all of this:

background-color: #000;
background-image: url(/images/background.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;

We’re able to shorten it into a single statement that looks like:

background: #000 url(/images/background.png) top center no-repeat fixed;

Easy-peasy. Note that you don’t need quotes around your image url. (Unless you have a space in the image. Which you shouldn’t do online; remove the space instead of adding quotes.)

This shorthand goes even further in CSS3. With the new ability to have multiple backgrounds (very little support to-date), you can throw them all on a single background statement separated by commas like this:

background: url(/images/background-top.png) top center no-repeat, #000 url(/images/background-bottom.png) bottom center no-repeat;

The background shorthand is also further expanded to accommodate more new background attributes in CSS3, but because of the limited support I won’t cover them here now.

Shorthand declarations and cascading

Now that you have a grasp on which attributes can be shortened and how to do it, let’s get a little advanced here and talk about how using a mixture of shorthand and longhand declarations saves much time with cascading styles. See the following two style declarations. The first declares a generic box with a 10px margin on all sides and a 10px padding on the top/bottom paired with 15px padding on the right/left. To top it off, we have a reddish border of 2px all the way around. The second builds on that idea, but mixes things up a little; the designer decided that the left side should always have a margin of 20px; and a blue colored border.

div.box {
    margin: 10px;
    padding: 10px 15px;
    border: #900 solid 2px;
}
div.callout {
    margin-left: 20px;
    border-color: #009;
}

So, if we have a box constructed as such: <div class="box callout">, you will see the following:

Voilà, we have a box with 10px margin on all but the left side, with a solid 2px border that is blue instead of red. And the padding stays as was declared for div.box.

This is only one simple example of many possible uses. But imagine the time you save not only authoring the CSS but maintaining it. In this case, if you want to change the margin-bottom for all boxes, you only have to change the code in one spot, instead of for every single box. The more you code, the more you understand how simple things like that make your life much easier.

Did you find this useful? Have more questions about it? Comment and let me know what other CSS stuff you want to learn more about.