CSS allows you to separate html tags from the content. In typical html, all the tags go directly around the text or objects they apply to. With CSS you can

1. place most of the tagging at the top of the document inside the head tag, or
2. create a separate file for most of the coding (the file extension is .css).

This is convenient because

1. it lets you change a tag or property once and apply to it the whole document, or
2. it lets you change a tag or property once and apply to it the whole site.

CSS is also considered more compliant with disability guidelines for the web. Sight impaired users can define their own separate style sheets in their browsers and apply them to your site. This is why the Web Style Guide recommends that everyone use CSS for text.

CSS also lets you define attributes to tables and layers. This can create a nice look for your pages but the Web Style Guide recommends using straight tables in html because CSS for tables still shows up inconsistently in various browsers. This is becoming les so, but it is your call.

At this point you may decide not to use CSS at all. And that's fine. But it is important to be familiar with CSS, so work through this tutorial or the CSS chapter in your DW book and play around with it a little. DW makes it pretty easy.

1. Get started.

• Download one of your pages from your Mason space to the desktop.
• Open the page up in DW: File-->Open-->browse to desktop-->select file.

2. Create and apply a class.

• Click on the Design tab in the panels (windows) list.
• Click on the CSS styles tab.
• As you create new styles, they will show up here.
  
  
• Click the New CSS Style button at the bottom right of the CSS styles tab.
  (You can also select Text-->CSS styles-->New from the top bar)
• Select the button next to Class.
• Give a name to the special class style you are creating (.header perhaps).
• Select the button next to This document only. (This places the style at the top of this page only.)
• Click OK
  
  
• The CSS style defintion dialog box appears.
• Select Type in the catergory list to the left.
• Select a font and size, etc. from the drop down menus (make it something drastic so you can easily see the change).
• Click OK. The class should show up in the Design/CSS panel. (Click the + button if you don't see it.)
  
  
• Highlight a block of text in your page.
• Go down to the Properties dialog box and select .header (or whatever you called it) from the Style drop down menu.
• If you don't like the new format, you can simply select None from the Style drop-down menu or select Edit-->Undo from the top bar.
• You can continue to apply this style class to any highlighted text or table cell (it will apply the style to all the text in that cell.)

3. Redefine an HTML tag.

In addition to creating new classes, you can define specific properties for existing html tags. Every time you use that tag in a page it will display the new properties designated in CSS.

• Highlight the main title or a large header in your page.
• Apply the Heading3 tag to it: in the Property dialog box select Heading3 from the Format drop-down menu.
  
  
• Click the New CSS Style button in the Design/CSS Styles panel.
• Select the button next to Tag.
• Select h3 from the Tag drop-down menu at the top (instead of selecting or naming a class).
• Select the button next to This document only.
• Click OK.
  
  
• The CSS style defintion dialog box appears.
• Select Block in the category list to the left.
• Select center or other properties from the drop down menus.
• Select Font in the category list to the left.
• Select a font style and size from the drop down menus.
• Click OK. The text on your page should automatically change. If not, you may have to click Apply instead of OK.

4. Explore CSS code.

• Click on the Code button (instead of Design) at the top left.
• Scroll up to the head tag and take a look at the CSS code you've created.
• Also see p.280 (in MX 2004) for an example of what the code will look like.
• You can define specific properties for any html tag just as you did for h3.

5. Create an external style sheet.

External styles sheets work the same way internal ones do--they create separate code for a class or a tag--but the external page can apply to every page in your site by putting the code in a separate file.

• Click the New CSS Style button in the Design/CSS Styles panel.
• Select the button next to Tag.
• Select font from the Tag drop-down menu at the top (instead of selecting or naming a class).
• Select the button next to New Style Sheet (Define in).
• Click OK.
  
  
• The Save Style Sheet File As dialog box opens.
• Browse to the folder you want to save it in (in this case desktop if the file you are working with is there).
• Give the file a name (test is fine for now) and make sure the extension is .css
• Click Save.
  
  
• The CSS style defintion dialog box appears.
• Select Font in the category list to the left.
• Select a font style and size from the drop down menus.
• Click OK.
  
  
• DW references the external style sheet in the head of your page.
• To add additional styles to the new style sheet, select the name to the external style sheet from the Define In drop down menu (instead of selecting New SS or this document only).
• To edit an internal or external style:
  • Select the style in the Design/CSS styles panel where they are listed.
  • Click the Edit Style button to the right of the Design tab at the top of the panel to open the CSS Style Definition Dialog box.
  • Edit the style and save the changes.
• You can also export internal CSS into a new external page:
  • Go to File-->Export-->CSS Styles
  • The Save Style Sheet File As dialog box opens.

6. Read up on style categories.

• The DW book gives you a breakdown of the eight primary categories that show up on the left in the CSS style definition dialog box.
• In the MX 2004 edition, this is on pages 275-78.
• Skim around on it to familiarize yourself with what they do.

7. Check out some other CSS tutorials.

• W3C CSS Intro Page
  
• Writing CSS Level 1
• Stylized CSS table templates

<< Back to Syllabus