Products

Technologies

A–C

D–H

I–Z

Developer services

Project centers

Developer resources

Community resources

Integration

Product documentation

Downloads

Samples

Training and books

Newsletters

Blogs

ADC program

Additional resources

Gradually Implementing CSS in Your Site

Saying Goodbye to the Tag

Now you need to remove the deprecated  tags from your document. Before you remove them, however, you should investigate a bit. Most likely, the majority of your document uses a single font set. In fact, most  tags in the document probably use the same basic definition. Figure out what that is, but for the purposes of this example, assume that there are four basic uses of the  tag in the page:

<font face="Arial, Helvetica, sans-serif" size="3">
<font face="Arial, Helvetica, sans-serif" color="#990000" size="+1">
<font face="Arial, Helvetica, sans-serif" color="#FFFFFF" size="-2">
<font face="Times New Roman, Times, serif" size="4">

As you can see, most of the  tags use Arial as their font. For this tutorial, assume that the first instance is the most common. This means that it is the candidate that becomes your default text style:

Remove the  tags from the document by selecting Edit > Find and Replace.
In the Find and Replace dialog box, select Specific Tag in the Search pop-up menu and choose Font from the subsequent pop-up menu to the right. Because you are looking for all  tags in the document, regardless of their attributes, click the minus (–) button to remove the attribute criteria.
From the Action pop-up menu, choose Strip Tag and then click the Replace All button.
With all of the  tags gone, create a global rule for the text on the page by modifying the body, td, th rule that Dreamweaver has already created. Simply open the Page Properties dialog box again. From the Page font list, select the appropriate font set.

At this point, let's discuss font sizes. There are two units that you must consider: pixels and em spaces. To determine which unit is right for you, consider which criterion is most important: visual design or accessibility. If you want to ensure that your page renders the same across the various browsers and platforms, use pixels as your unit of measure. In doing so, however, you render your site less accessible. This is because a pixel is a fixed unit of measurement and causes older browsers and screen assistants to increase the size of the text. By using em spaces, you establish a flexible unit of measurement that lets users increase the size of the text in their browsers. However, this means that your design may then reflow. Whichever unit you choose is simply a matter of knowing your target audience. For this example, use the em space.

An em space is simply equal to the width of an m in the selected font. In other words, if a Microsoft Internet Explorer is set to its standard font display (approximately 14 pixels), then one em equals 14 pixels.

To set the font size, select Modify > Page Properties. Set the font size to 1 ems because the  tag used a size of 3, which is equal to the browser's default size. This produces a rule as follows:

body,td,th {
   color: #FFFFFF;
   
   font-family: Arial, Helvetica, sans-serif;
}

Dreamweaver simply adds the attributes to the previous definition of the body, td, and th tags, instead of adding an entirely new definition. Looking at your page in Design view, notice that the text on the page appears using the definition from the rule.

Note: The unit of measure is actually "em" and Dreamweaver does write it properly in the code. In the pop-up menu, however, it appears—incorrectly, in my opinion—as "ems."

With your first  tag now replaced by a CSS rule, you can create rules to replace the other instances of the  tags, which you already removed from the document.

To create the next rule:

Return to the CSS Styles panel and click the New CSS Style button (at the bottom of the CSS Styles panel). Apply this new rule individually to appropriate elements on the page. Because you want to be able to use the style many times on the page, define this as a Class, select this document only, and name it .title. Notice that the name includes a period ".", which indicates that it is a class definition. In CSS, a period precedes a class name, a tag definition contains only the name of the tag, and a pound or hash (#) sign precedes an ID name. Remember that the tag looked like this:
```

```
The CSS Style Definition for .title dialog box appears. Because this tag uses the same font as the redefined body, td, and th definition, you only need to change the color and size. Select #990000, a dark red for the text category.
To make the text slightly larger than the standard font size, set the size to 1.2 em, which will make it 20 percent larger than normal.
To apply the style, simply select the text on the page—or, if the text is by itself in a table cell, select the table cell. Using the Property inspector, select the title style (the style you just created) from the Style pop-up menu.

Notice that the text continues to appear in Arial because that element inherits that particular attribute from the parent container, in this case the body, td, or th tag.

Following these steps, you can create and apply rules to replace the rest of the  tag in your document.

A–C

D–H

I–Z