The CSS Anthology: 101 Essential Tips, Tricks and Hacks, Chapter 2 - Text Styling and Other Basics

How do I specify that my text is shown in a certain font?

Solution

Specify the typeface that your text will adopt using the font-family property like so:

p {  
 font-family: Verdana;  
}

Discussion

As well as specific fonts, such as Verdana or Times, CSS allows the specification of some more generic font families, which are:

• serif
• sans-serif
• monospace
• cursive
• fantasy

When you specify fonts, it's important to remember that users probably don't have the same fonts you have on your computer. If you define a font that they don't have, your text will display in their Web browser's default font, regardless of what you'd have preferred, or your site design.

You can simply use generic font names and let users' systems decide which font to apply. For instance, if you want your document to appear in a sans-serif font such as Arial, you could simply use the following code:

p {  
 font-family: sans-serif;  
}

However, you'll probably want to have a little more control over the way your site displays—and you can. It's possible to specify font names as well as generic fonts. Take, for example, the following CSS declaration for the <p> tag. Here, we've specified that if Verdana is installed on the system, it should be used; if it's not installed, the computer is directed to see if the user has Geneva installed; failing that, the computer will look for Arial, then Helvetica. If none of these fonts is available, the computer is instructed to use that system's default sans-serif font.

p {  
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;  
}

How do I remove underlines from my links?

The default indication that text on a Web page is a link to another document is that it's underlined and is a different color from the rest of the text. There may be instances in which you want to remove that underline.

Solution

We use the text-decoration property to remove the underlines. By default, the browser will set the text-decoration of an <a> tag to underline. To remove the underline, simply set the following property for the link:

text-decoration: none;

The CSS used to create the effect shown in Figure 2.5 is as follows:

Example 2.5. textdecoration.css

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

Figure 2.5. Use text-decoration to create links that aren't underlined.

Discussion

In addition to underline and none, there are other values for text-decoration that you can try out:

• overline
• line-through
• blink

You can also combine these values. For instance, should you wish to have an underline and overline on a particular link, as shown in Figure 2.6, you'd use the following code:

Example 2.6. textdecoration2.css

a:link, a:visited {  
 text-decoration: underline overline;  
}

Figure 2.6. Combine text-decoration values to create links with underlines and overlines.

Misleading Lines

You can use the text-decoration property on text that's not a link, however, be wary of this. The underlining of links is such a widely-accepted convention that users tend to think that any underlined text is a link to another document.

When is Removing Underlines a Bad Idea?

Underlining links is a standard convention followed by all Web browsers and, consequently, users expect to see links underlined. Removing the underline from links that are within text can make it very difficult for people to realize that these words are in fact links—not just highlighted text. I'd advise against removing the underlines from links within text. There are other ways in which you can style links so they look attractive and removal of the underline is rarely, if ever, necessary.

Links that are used as part of a menu, or in some other situation in which the text is quite obviously a link—for instance, where the text is styled with CSS to resemble a graphical button—are a different story. If you wish, you can remove the underline from these kinds of links because it's obvious from their context that they're links.

How do I create a link that changes color on mouseover?

An attractive link effect changes the color or otherwise alters the appearance of links when the cursor moves across them. This effect can be applied to great advantage when CSS is used to replace navigation buttons; however, it can also be used on links within your document.

Solution

To create this effect, we style the :hover and :active pseudo-classes differently than the other pseudo-classes of the anchor tag.

Our links are styled with the following declaration in the style sheet:

Example 2.7. textdecoration3.css

a:link, a:visited, a:hover, a:active {  
 text-decoration: underline;  
 color: #6A5ACD;  
 background-color: transparent;  
}

When this style sheet is applied, our links will display in the blue color #6A5ACD with an underline, as shown in Figure 2.7.

Figure 2.7. The same declaration is used for all pseudo-classes of these links.

To make our :hover and :active pseudo-classes different, we need to remove them from the declaration with the other pseudo-classes and give them their own declaration. I decided to apply an overline in addition to the underline, a background color, and make the text a darker color. The resulting CSS is below (see also Figure 2.8):

Example 2.8. textdecoration4.css

a:link, a:visited {  
 text-decoration: underline;  
 color: #6A5ACD;  
 background-color: transparent;  
}  
a:hover, a:active {  
 text-decoration: underline overline;  
 color: #191970;  
 background-color: #C9C3ED;  
}

Figure 2.8. The effect of our CSS is evident when we roll over a link with a hover style.

As you've probably realized, you can style the other pseudo-classes separately, too. In particular, you might like to style differently links that the user has visited. To do this, you'd simply style the :visited pseudo-class separately.

When styling pseudo-classes, take care that you don't change either the size or weight (boldness) of the text. If you do, you'll find that your page appears to "jiggle," as the content has to move to make way for the larger text to appear on hover.

Pseudo Order

The link pseudo-classes should be declared in the following order: link, visited, hover, active. If they aren't, you may find that they don't work as you intended. One way to remember this order is the mnemonic: LoVeHAte.

How do I display two different styles of link on one page?

The previous tip explained how to style the different selectors of the anchor tag, but what if you want to use different link styles within the same document? Perhaps you want to display links without underlines in your navigation menu, yet make sure that links within the body content are easily identifiable. Maybe part of your document has a dark background color, so you need to use a light-colored link style there.

Solution

To demonstrate how to create multiple styles for links, let's take an example in which we've already styled the links.

Example 2.9. linktypes.css (excerpt)

a:link, a:visited {  
 text-decoration: underline;  
 color: #6A5ACD;  
 background-color: transparent;  
}  
 
a:hover, a:active {  
 text-decoration: underline overline;  
 color: #191970;  
 background-color: #C9C3ED;  
}

These should be taken as the default style—this is how links will normally be styled within your documents. This link style makes the link blue, so, if you have an area with a blue background on your page, the links will be unreadable. You need to create a second set of styles for any link within that area.

First, you need to give a class or an ID to the area that will contain the differently colored links. If the area is already styled with CSS, it will already have a class or ID that you can use. Imagine your document contains the following markup:

Example 2.10. linktypes.html (excerpt)

<div class="boxout">  
 <p>Visit our <a href="store.html">online store</a>, for all your  
   widget needs.</p>  
</div>

You will need to create a CSS rule to affect any link appearing within an area for which the parent element has the class boxout applied:

Example 2.11. linktypes.css (excerpt)

.boxout {  
 color: #FFFFFF;  
 background-color: #6A5ACD;  
}  
.boxout a:link, .boxout a:visited {  
 text-decoration: underline;  
 color: #E4E2F6;  
 background-color: transparent;  
}  
 
.boxout a:hover, .boxout a:active {  
 background-color: #C9C3ED;  
 color: #191970;  
}

Figure 2.9. Two different styles of links can be used in one document.

As shown in Figure 2.9, this will display all links in the document as per the first style except those that appear in the boxout—these links will be displayed in the lighter color.