THE DOCUMENTATION ON THESE PAGES IS INTENDED FOR USE BY OVIATT LIBRARY FACULTY. NON-LIBRARY CSUN FACULTY SHOULD CONTACT CSUN IT FOR HELP SETTING UP WEB SITES ON THE CAMPUS SERVER

Applying CSS in Dreamweaver

Before proceeding, you may want to familiarize yourself with the basics of style sheet use.

Where is the style sheet?

Like the images in your page, a "linked" style sheet is fetched by the browser because your page references its location. In the templates we are using for creating pages at the Oviatt library, identical copies of the style sheet exist in the H:\Website folder and on the web server, referenced by relative address (i.e. not the full URL). This allows all styles to be visible in the Design View when you are creating pages at the library. If you create pages anywhere other than H:\WebSite using the H:\WebSite templates, the pages will not display properly.

The Dreamweaver templates reference two style sheets:

• http://library.csun.edu/contrib.css, which contains most of the styles you can apply to your pages.
• http://library.csun.edu/templates.css, which affects the appearance of regular HTML elements and elements in templates, and provides a few more some custom style options.

Both style sheets are annotated. See Styles in Dreamweaver page for illustration of uses.

How to apply styles to elements on your page in Design View

1. Select Design View from the Viewing Options buttons.
2. Place your cursor somewhere in a discrete element like a paragraph, list item, or hyperlink.
3. Examine the Tag Selector line and select right-click on the tag that corresponds to the element to which you want to apply style. Select Set Class.
4. Select one of the styles that appear in the pop-up menu with your mouse.
5. Design View should instantly reflect the style that has been applied. However, you will get a more accurate view of how the style will look on the web if you press the F12 function key.

How to apply styles to "spans" of text within paragraphs

1. Select the text to which you'd like to apply a given style
2. Right-click your selection, and select CSS Styles.
3. Select one of the styles that appear in the pop-up menu with your mouse.
4. Dreamweaver will apply the style using the <span> element, which will now appear in the Tag Selector line.