Using Style Sheets in Dreamweaver.

Creating a new style sheet:

File, New… and choose CSS Style Sheets for category and Basic: Arial for a starter style sheet.

Save style sheet using menu choices File, Save As… in a new folder called css that is in your local root folder for this website. Call the file global.css

Attaching a style sheet to an html page or template:

Open the webpage or template that you want formatted by the style sheet, and open the design window (called the css window in newer versions of Dreamweaver). Notice the four icons on the bottom of the CSS styles window. Click the left-most icon to attach a style sheet to the active webpage. Browse for the style sheet you just created (global.css) in the folder you just created (css). Be sure to link, and not import, the style sheet. When you do this, you should see all the text in your webpage change to the Arial typeface.

Categorizing text with tags: Link when using styles in Word, we need to identify categories of text, and then define styles that apply to those categories. In this first example, we will categorize text as heading 1 (the largest of 6 heading sizes), a hyperlink (actually, 3 versions: regular, visited, and hover), and a new user-defined tag, called a “class.”

To make text into a heading, select the text and choose the appropriate heading in the Format property. Note that heading 1 is the top level heading.

To make text (or an image for that matter) a hyperlink, select the text (or image). For an external link only—meaning a webpage that is not part of your site—paste the URL of the webpage in the Link box in the

properties window. For an internal link—meaning a link to another page or file on your site—point to the bullseye icon to the right of the Link box in the property window (marked above by a red arrow) and drag your mouse to the file that you want to link to in the files window on the right; make sure you are in local view.

Defining styles for tags: To define a new style for a standard tag, such as a heading, click the icon in the design/css window with the plus sign to create a new style. For selector type, choose Tag, for the Tag type, choose h1 (for heading 1) in the dropdown list, and be sure the style is defined in your style sheet (global.css) and not in your document.

To define a style for hyperlinks, create a new style as above, but choose Advanced for the selector type. In the Selector dropdown, choose a:link to define the style for unvisited links, a:visited to define a style for links the browser has already visited, and a:hover to define the style for the link that will appear when the user points to the link with the mouse. Note, since the default link style is underlined, if you don’t want the text to be underlined, you will have to choose “none” for the decoration property.

Naming tables and images (with id’s) and assigning styles to these objects. You may give a specific object (e.g., a table or image) in your document a name, called an id, and then define a style for just that one object (by its id). To do this, select the object and enter a name in the id window (examples for a table is on the left

and an image is on the right). Create styles for these ids by creating a new style as above, choosing advanced for the selector type, and then entering a # character and the id that you choose, as shown in the two examples. You may choose to make

an image float to the right, which will have the text wrap around it, or you may choose a border, with many more options than you have when using html formatting.

Categorizing text by creating new classes: You can also create your own custom tags for categorizing data, called classes. To do this, first define the style for the class

by creating a new style, choosing Advanced for selector type, and entering the class name in the selector box. Be sure to begin the class name with a period. Once you’ve defined the formatting for this style, you can assign the class (and associated styles) to text by selecting/highlighting the text and choosing

the style name in the Style box in the property window.