Accessibility

Dreamweaver Article

 

Gradually Implementing CSS in Your Site


Table of Contents

  1. Introduction
  2. Replacing the <body> Attributes
  3. Saying Goodbye to the <font> Tag
  4. Fixing Other Undesirable Attributes
Comments

Replacing <body> Attributes

Now it's time to start styling. For the rest of this article, you'll look at tags to replace and create styles to mimic, and in most cases even improve their presentation. To follow along in Dreamweaver MX 2004, simply open any of your table-based, traditionally styled documents. Back up this page before proceeding.

Your first step in implementing CSS is to replace the traditional page properties defined as attributes of the <body> tag (your <body> tag attributes will appear slightly different). Suppose your <body> tag looks like the following: 

<body bgcolor="#E6e6e6" text="#FFFFFF" leftmargin="0" 
topmargin="0" marginwidth="0" marginheight="0">

Follow these steps to replace the <body> tag attributes:

  1. Start Dreamweaver MX 2004.
  2. Open an HTML document with a table in it.
  3. Switch to Code view.
  4. Locate the <body> tag, select all the attributes following the word body, and delete them.

Caution: If you have any JavaScript in your <body> tag, such as an OnLoad handler, leave those attributes as is. In the above example, you no longer need any of the attributes such as bgcolor, text, leftmargin, and so forth. You will replace all those elements by redefining the <body> tag through CSS.

To redefine the <body> tag in Dreamweaver MX 2004, you have two options. You can use the Page Properties command or define the style manually using the CSS Styles panel. In this example, you'll use the Page Properties dialog box to define the style. This has the disadvantage of adding the style to the document itself instead of adding it to an external style sheet. While you'll eventually want to put the styles in an external style sheet, I find it easiest to work locally and then export the styles when I know they are properly defined.

Follow these steps to redefine the <body> tag:

  1. Select Modify > Page Properties to set all of the attributes using the values above, for bgcolor, text, and so forth. Note that in Dreamweaver MX 2004 you can define a default font and font size, as well as a number of other attributes that were not available when you relied upon standard HTML to design the appearance of your page. For now, however, just modify the attributes that you deleted above. Dreamweaver creates a new style definition in the <head> section of your document with two rules: 

    <style type="text/css">
<!--
body,td,th {
   color: #FFFFFF;
}
body {
   background-color: #e6e6e6;
   margin-left: 0px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
}
-->
</style>
  2. To see the style definition, open the CSS Styles Panel (select Window > CSS Styles) and expand the <style> tag.
  3. Notice that the body tag appears twice in the code above. The first one is a line with body, td, and th. For those of you who are new to CSS, this means that you have redefined all three tags at once, giving all of them the text color #FFFFFF.

Remember that one of the reasons for implementing CSS is to reduce the amount of code for rendering a page. CSS combines the definition of multiple rules by putting them in a single line and separating the individual entries with a comma.

Page 2 of 4
Previous Page
Next Page