These pages use Javascript to provide a stylesheet appropriate to your browser. The pages are functional without javascript but not aesthetically pleasing.

DreamweaverMX Tutorials

6. Tables & CSS

Dreamweaver Tutorials

6.5 Modifying Styles

Dreamweaver provides several ways to modify the appearance of text using CSS.

When designing for older (version 4 and older) browsers, designers sometimes code with both CSS and HTML tags (font color, for example). View source on lesson_5c.html to see this in action.

The easiest way to build sites is to use HTML tags for structure and then CSS to "style" the document. This means that older browsers will render a "plain" page, but the page will be functional.

This strategy works if most of your audience is using more modern browsers but does not if a majority is still using old browsers. We're assuming the former.

exercise

  1. Open lesson_5c.html; use Split View.
  2. Find the section: 
    <!-- unstyled text -->
<h3>There are five training styles:</h3>
  3. Open the CSS Styles Panel (Shift+F11 or Window > CSS Styles
  4. Click New Style (the + button). Select Redefine HTML Tag; in the tag field, scroll to h3; define in this document only. Click ok.
  5. Click New Style (the + button). Select Redefine HTML Tag; in the tag field, scroll to h3; define in this document only. Click ok.
  6. You now have a CSS Definition Panel:
    • In the "type" field, select Verdana, Arial ... for the Font and medium for the Size.
    • In the "border" field, de-select "Same For All" and make the Bottom - Dashed ... pick a Color for the bottom border by clicking the color "square" and using the color-picker.
    • View the head section of the document using Split or Code view.
    • Preview in browser (F12)


resources
next previous PDF print home