web interactivity

Creating a <body> style in an external style sheet

A great advantage to creating a style sheet in a separate CSS file is that theexternal style sheet can control many pages at once. It is a common strategy to have all the pages of a web site linked to a single CSS file; changing a CSS rule in this file — a new background color, for instance — will then change all the pages on the site to that new color. The changes cascade into all the files. The down side to an external style sheet is that you now have to keep track of another file in addition to your HTML. You also have to be careful about moving it or changing its name, either of which would sever the link to the HTML file or files.

1. Create a new basic page in Dreamweaver or open an HTML file that you have already created. If it's a new page select the menu item File > Save, type in a name for the page, select Desktop, and then click ‘Save’.

2. Insert a paragraph or two of text so we can see what the style does to your page.

3. Open the CSS Styles panel (select the menu item Window > CSS styles).

4. At the very bottom of the CSS Styles window, click on the icon to create a new style.

5. In the dialog box that follows, choose ‘Tag (redefines an HTML element)’ from the dropdown menu in 'Selector Type'.

6. In the 'Selector Name' section, either type in the tag name of 'body' or select it from the pulldown menu.

7. Under 'Rule Definition' at the bottom choose ‘New Style Sheet File’ from the dropdown menu.

8. Click OK to exit the first part of this dialog.

9. Now a second dialog appears where you must name the new style sheet and say where it is going to be stored. You can call it whatever you want, but I recommend a name that tells you something about the file ("biographyStyles", for instance). Save the style sheet in the same folder where the HTML file lives; if that's the Desktop, for instance, save it to the Desktop.

10. Now a third dialog box appears, the ‘CSS Rule definition for body’ . Use it to pick a font-family, font-size, and/or color for the text. Many other changes can be made to the look of the text at this time.

11. Click ‘OK”

12. Select the menu item File > Preview in Browser > Safari. When asked to save, click ‘OK’.