Study Guides: Cascading Style Sheets

The following directions refer to Macromedia Dreamweaver MX. You can write style sheets in many programs, including Wordpad, but Dreamweaver automates the process for you. A separate study guide introduces you to Dreamweaver and details the steps needed to set up your CMS 3710 site.

Creating a new external Cascading Style Sheet (CSS)

1) Open the html page that you wish to style.

Select Text > CSS Styles > New. The CSS style window will open. You will first set the page's text size and color and the background color. You do this by attaching styles to the "body" tag.

2) In the CSS style window, change the radio button in the middle section to "Tag," and then change the "Tag" drop down menu (the very first line in the window) to "body."

3) In this same window, change the "Define in" drop down menu to "New style sheet file." Click OK.

4) A new window will open, asking you to name the new style sheet and to pick the folder into which it should be saved. To keep things neat, you should name the file something useful (e.g. "project2.css") and save it into the appropriate project folder.

5) Another window will open, called "CSS style definition for body in...."

6) Here you can select "Text" in the Category column to change the font, font size, and font color. (These options are available on the right side of the window.)

7) To change the background color, select the "background" item in the Category column.

8) When you are done making changes, click "OK." The new style sheet's file name should appear in the "Design" pane under the "CSS styles" tab now and whenever you open this file from now on.

You can edit the styles by selecting them (e.g. click on "body" in the Design pane) and then clicking the third button in the Design pane, which will say "Edit style sheet" when you hover over it.

Attaching existing style sheets

Once you have created the style sheet, it's a simple matter to attach it to other html pages. Just open the page, click on the first button in the Design pane ("Attach Style Sheet") and find the css file in its folder.