Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Intro to HTML and XHTML (CSS edition)

Last updated Oct 17, 2003.

Giving Content Character With CSS

The first part of my HTML and XHTML Introduction covers HTML files, elements and tags, and document structure. It looks at creating a basic HTML page, opening and viewing the page, and adding structure to the page. Part II looks at the tags along with their attributes and values.

This part is all about content—how to format and align text. Formatting also includes emphasizing text with bold and italics, managing font size and colors, selecting a typeface, and dealing with special characters.

Emphasize, Emphasize, Emphasize

The tags <b>, for bold, and <i>, for italics, are deprecated. This means that they still work, but they’re no longer the recommended standard. Instead, use <strong> for bold and <em> for italics. Better yet, use cascading style sheets (CSS) to manage emphasis. What if you decide to change your emphasized text from bold to bold red or italics? It's easier and faster to do it through CSS rather than search for all the <em> and <strong> tags.

It's good to know how to emphasize text without CSS as it helps you "read" markup and understand what's happening. The following paragraph is an example of how to add bold and italics. Figure 1 shows the result.

Fusce rhoncus lorem non erat. Maecenas ac orci.
Fusce adipiscing iaculis nulla. Morbi nisi ligula,
iaculis id, bibendum sed, varius sit amet, mauris.
Ut ligula lectus, luctus at, aliquam nec, mollis nec,
<strong><em>nibh</em></strong>.

Figure a

Did you notice <strong> and <em> used on the same phrase? The placement of elements is nested. The following incorrectly uses nesting and XHTML won't be happy.

nibh

Even when the elements don't cover the same text, they still have to follow the nesting rule as shown in the following example.

Morbi nisi ligula, iaculis id

Now, let's manipulate text with CSS. Here is the first example where we use <span> and assign a class.

Fusce rhoncus lorem non erat. <span class="important">Maecenas ac orci</span>.

We identify three words by using the class attribute with a value of "important." What are the ways you'd have important words stand out? Bold? Red and bold? Larger text size? First, add style to your page before the .

<style type="text/css">
<!--

 

-->

We want to make the important phrase stand out. Bold is more noticeable than italics. Every element, class, and ID begins with { and ends with }. .important is the class, so the { appears immediately after it and } appears after its last attribute. Each attribute ends with a semi-colon (;) to indicate the end of a line. Let's review what we have now:

.important is the class.
font-weight is the attribute.
Bold is the value.

<style type="text/css">
<!--
.important {
    font-weight: bold;
} 
-->

The result, as shown in Figure 2, is the same as using <strong> instead of <span> like the following.

<strong>Maecenas ac orci</strong>

Figure b

Why go through all that trouble of adding <style> instead of <strong>? Someone might decide they want to emphasize text differently. Instead of bolded text, he might want larger text, colored text, or both.

Text: Large and small

All of the text is size 1em, the default size. We can change the paragraph to make it larger by assigning a class named “large” to it.

<p class="large">Fusce rhoncus lorem non erat. <span class="important">Maecenas ac orci</span></p>.

In CSS, font-size and font are used to change the text size. The example uses font-size. Here the font-size assigns 2em to the large class and Figure 3 shows how it appears online.

<style type="text/css">
<!--
.large {
    font-size: 2em;
} 
-->

Figure c

How can you make it small? Just change the 2 to .5 or another number less than 1.

Typeface: Cheap and Fast Web Site Plastic Surgery

You can assign any typeface to your content, but the problem is that your visitors may not have it loaded on their computers. Furthermore, Mac and Windows computers each have different typefaces that come with the computer.

I went to a colleague's Web site to check it out. It had Times New Roman as its typeface. I explained to him that Times New Roman was designed for print and typefaces like Verdana were better for the Web. He said that the page didn't have Times New Roman on his computer, which was a Mac. I looked at the CSS and found the problem. It had Gills Sans and Gills Sans Light and nothing else. My computer didn't have either, so it went with the default of Times New Roman.

My recommendation to him was to add sans-serif at the end:

.style1 {
    font-family: Gills Sans, Gills Sans Light, sans-serif;
}

Sans-serif and serif work well as the last choice (use one or the other, not both) since these are broad categories. Every font falls into one of the two. It's the last resort should the computer not have the other fonts loaded. Here's an example of what happens when you have the following font-family values.

.style1 {
    font-family: Gills Sans, verdana, arial, sans-serif;
}

The Web page tells the Web browser to load Gills Sans. If the computer doesn't have it, then it goes to verdana as the next choice. If that isn't available, arial comes next and then sans-serif as a last resort.

To ensure .large uses the preferred typefaces, add another line to the style sheet.

.large {
    font-size: 2em;
    font-family: verdana, arial, sans-serif;
} 

The result looks like Figure 3. What's the point of adding the font-family when the typeface looks the same? On some computers, the typeface could be Times New Roman. It's often the default typeface when none appears in the CSS.

Add a Splash of Color

Though it's ideal to avoid using too many different colors on text because it hurts readability, sometimes it's necessary or beneficial to emphasize a header or important information. Remember the .important class? A little red would make sure the visitors notice it. Just add the color attribute and a value.

.important {
    font-weight: bold;
    color: #ff0000
} 

Substituting #ff0000 with red gives the same result. For more info on colors, check the resources in Color Theory.

Control Text Alignment

Breaking the <center> habit is a hard one, but text-align is a great antidote. Just add the text-align attribute to the CSS and it aligns left, right, centered, or justified. Left is the default.

.large {
    font-size: 2em;
    font-family: verdana, arial, sans-serif;
    text-align: center;
} 

Put All the Font Stuff Together

You can put all of the font information into one attribute—plain ol' font. Just add a space between each value and keep the semi-colon (;) at the end to indicate the end of a line. The following assigns bold, size 2em with the choice of verdana, arial, and sans-serif in that order for the typeface to the h2 section heading. Only the typefaces get a comma between them since they're part of the same attribute (font-family).

h2 {
    font: bold 2em verdana, arial, sans-serif text-align: center;
}

Formatting text with CSS is a breeze, especially when you use external style sheets (see Step 3 for an example). The CSS in here appears within <style> and </style>, so it's called an internal style sheet. It's not the best way to manage text for an entire Web site, but it's also not the worse way. Internal style sheets are better served for special pages that need to differ from the rest of the site. The worse way is inline styles, where the style appears within the body. Using the paragraph sample, inline style uses the following:

<>p style="font-size: 2em; font-family: verdana, arial, sans-serif; text-align="center">Fusce rhoncus lorem non erat. Maecenas ac orci.</p>

This resembles using tags like <strong>, <em>, and <font> within the content. This mixes content with presentation, which leads to a messy maintenance process. What the font are you waiting for? Have fun with it!