Styling Links

Links need to be visible on a web page. Otherwise, they won't be tapped.

Options for visibility include colors, sizes, fonts, under/overlines, and borders.

Way early internet link colors defaulted to:

• Standard link: blue
• Active link: purple
• Visited link: red

Even today, many popular browsers download with a version of the above default link colors. Often, they are also underlined. Browser preference dashboards are used to change the defaults.

Default colors and styles are what you see when a web page has no styles implemented.

To check the defaults with your various browsers, create a web page without CSS anywhere in it. When the page is loaded, the browser's defaults will be used to render the page.

Use CSS to override the browser's default styles.

CSS can be used to style all aspects of links on the page. And the various aspects can be styled separately.

Note, the example links on the rest of this page are non-working.

To style all aspects, use CSS like this.

<style type="text/css">
a { text-decoration:none; background-color:#EFEFEF; }
</style>

The above removes any overline/underline that the browser's default may have. And it sets the background-color to #EFEFEF. It looks like this with your browser:

The CSS affects only the text decoration and background color. Everything else in the above example is according to your browser's default styles.

To see all your browser's default styles, create a test page without any CSS styling.

If you decide to put the above CSS into a test page, you'll see your links now have a very light gray background color. If your browser's default styling included an underline, that has been removed, too.

CSS style rules can be put into an external style sheet or inserted on the web page where they will be used. If on the web page where they will be used, in the head area or the body area. Generally, the earlier on the page that the style is put, the better, because the browser applies the style throughout the page when a style rule addition or change is encountered.

To style all aspects, use CSS like this.

<style type="text/css">
a { 
   text-decoration:none; 
   background-color:#EFEFEF; 
   border:3px dotted #CCC;
   padding:0 3px;
   font-style:italic;
   font-weight:bold;
   color:red; 
   }
</style>

The above removes any underline and changes the background color, as the previous example. It also adds a border and padding. And it changes the font style, weight, and color. It looks like this:

Now, let's take this to the next level.

The four aspects or states that a link has are addressed below. When referring to CSS styles, they are called pseudo classes. Each can be designed separately.

1. a:link
   This is a regular link/

2. a:visited
   This is a link that the browser has previously visited.

3. a:hover
   When the mouse pointer hovers over the link, this pseudo class kicks in.

   If you are specifying styles for any of the previous 2 pseudo classes, their styles need to be specified before a:hover is specified.

4. a:active
   While the link is active (while you have the mouse button or your tapping finger down on it), this pseudo class kicks in.

   If you are specifying styles for any of the previous 3 pseudo classes, their styles need to be specified before a:active is specified.

Try this on your test page:

<style type="text/css">
a { text-decoration:none; background-color:#EFEFEF; }

a:link { color:orange; font-weight:bold; }

a:visited { color:green; font-weight:bold; }

a:hover { border:1px solid black; padding:.25em; font-weight:normal; }

a:active { color:pink; border:3px solid pink; } 
</style>

Your test page will look like this (assuming no other styling is on the page):

You'll see that when the link text changes from bold to normal, it jumps a bit. This is intentional to demonstrate why the link text font and weight should be the same throughout. To prevent that, keep the font family, style, and weight the same for all aspects of the link.

You'll also notice the jumping characteristic when a border is applied and when it is non-existent. To prevent the jumping when you need a border for one of the pseudo classes for your design, give the same type of border, but colored transparent, to the other pseudo classes.

Here is an example with the changes made that are recommended in the previous paragraphs:

<style type="text/css">
a { padding:.25em; font-weight:bold; text-decoration:none; background-color:#EFEFEF; }

a:link { color:orange; border:1px solid transparent; }

a:visited { color:green; border:1px solid transparent; }

a:hover { border:1px solid black; }

a:active { color:pink; border:1px solid pink; } 
</style>

As you can see, you can style link text any style non-linked text can be styled. Using the pseudo classes, the different states of the link can adjust the link text design.

When an image is used instead of text, CSS that applies only to text will not change the image. But the non-text specific CSS will change the link, CSS rules relating to borders and padding for example.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager