This browser does not support basic Web standards, preventing the display of our site's intended design. May we suggest that you upgrade your browser?

Adobe Dreamweaver CS3

Creating Style Sheets

Dreamweaver allows you to create embedded styles, which define styles within the individual web page's HTML code, or external style sheets, which define styles by linking a web page to a style sheet file (.css). This document explains the three different types of CSS styles and shows you how to create and attach, or reference, both types of style sheets.

NOTE:
For more information on types of style sheets and the advantages of using CSS, refer to Cascading Style Sheets: An Overview. For information on applying, editing, and deleting CSS styles, refer to Formatting with CSS Styles and Using the CSS Rule Definition Dialog Box. For information on accessing and using the CSS Styles tab, refer to Using the CSS Styles Tab.

return to topTypes of Styles

Dreamweaver allows you to define three different types of CSS styles: class, tag,and advanced (selectors).

Types of Styles: Class

Class, or custom, styles are applied to individual elements of a web page. They are very useful because they allow designers to create style variations and apply them to existing HTML tags, text, or objects at any time. Class styles give designers the maximum flexibility that tag and advanced (which both define the style of tags at each occurrence) do not offer.

As class styles are defined, style definitions are stored in the CSS portion of a document. However, when you apply a class style to a pre-existing HTML tag, a special class property is added to the HTML code (e.g., <H1 class="title">). When you apply a class style to a section of text or object that is not an HTML tag, the selection of text cannot be identified by an individual tag. Thus, instead of a simple class property, a <span> tag is also added to the HTML as a text wrap (e.g., <span class="title">Review for Test 1</span>).

Since applying a class style removes formatting properties from the HTML, using class styles can greatly reduce the length of the HTML code but can also be unwise if your page viewers are using browsers that do not support CSS. For additional information on the HTML considerations of custom styles, refer to Formatting with CSS Styles.

Types of Styles: Tag

HTML code consists of tags that indicate how web pages should be displayed. Each tag has a default style applied each time the tag is used (e.g., Heading 1). When you use CSS to redefine the style of HTML tags, all text or elements within those tags are updated to reflect changes.

Types of Styles: Advanced (Selectors)

Advanced CSS styles are defined much like HTML tags. However, unlike HTML tags, which can be defined through the Properties pane or in the HTML code itself, CSS selectors can be defined only in style sheets. Dreamweaver allows you to define styles for four different types of CSS selectors: link, visited link, hover, and active link.

Selector Function
a: link Defines the style of an idle link
a: visited Defines the style of a previously visited link
a: hover Defines the style of a link when the mouse travels over it
a: active Defines the style of an active link

return to topCreating Cascading Style Sheets

You can create CSS style sheets at any time in the design process. Although there are two types of CSS and three types of styles, the process for creating styles is similar in both types of style sheets.

  1. If you have not saved your web page, save it

  2. Access the CSS Styles tab

  3. From the CSS Styles tab, click NEW CSS RULENew CSS Rule button
    The New CSS Rule dialog box appears.
    New CSS Rule dialog box

  4. To determine the type of style you will be defining, for Selector Type, select the desired option
    For a discussion of these options, refer to Types of Styles.
    The dialog box refreshes with options appropriate to your selection.

  5. In the Name text box, type the class name
    OR
    From the Tag or Selector pull-down list, select HTML tag or CSS Selector for which you are creating the style

  6. If you are creating an external style sheet, from the Define in pull-down list, select (New Style Sheet File)
    If you are creating an embedded style, for Define in, select This document only

  7. Click OK
    NOTE: If you are creating an embedded style, the CSS Style Definition dialog box appears. Go to Step 9.

  8. If you are creating an external style sheet, the Save Style Sheet File As dialog box appears
    1. Using the Save in pull-down list, select a save location for the style sheet
    2. In the File name text box, type a name for the style sheet
    3. Click SAVE
      The new style sheet is saved as a separate file. The CSS Style Definition dialog box appears.

  9. From the Category section, select the style element you would like to redefine
    Options for that category appear on the right side of the dialog box.
    CSS Rule Definition dialog box

  10. Select the desired options
    HINT: For more information on style definition, refer to Using the CSS Rule Definition Dialog Box.

  11. Repeat steps 9 and 10 until your new style definitions are complete

  12. Click OK
    NOTES:
    The CSS style will be added to the style sheet.
    Embedded styles will automatically apply to corresponding elements on the web page.
    External styles will automatically apply to corresponding elements on all pages which reference the style sheet.
    Unlike embedded style sheets, an external style sheet is treated as a separate file. To view or edit the new styles, you must open the style sheet file.

return to topAttaching Style Sheets

After you have created an external style sheet, you need to attach the style sheet to the files that will reference it. If you have created an embedded style sheet, this step is unnecessary because the style sheet is already attached to the file you are working on.

  1. Open the web page that will link to the style sheet

  2. From the Design pane, select the CSS Styles tab

  3. From the CSS Styles tab, click ATTACH STYLE SHEETAttach Style Sheet button
    The Attach External Style Sheet dialog box appears.
    Attach External Style Sheet dialog box

  4. To select a style sheet file,
    1. Click BROWSE...
      The Select Style Sheet File dialog box appears.
    2. Using the Look in pull-down list, locate and select the style sheet
    3. Click OK

  5. From the Media pull-down list, select the type of media your style sheet applies to

  6. For Add as, select Link or Import
    HINT: Most web designers choose to attach style sheets using Link, which uses a <LINK> tag in the <HEAD> section of the HTML. However, web pages using both embedded and external style sheets should reference the style sheet using Import, which uses the <@import> tag in the <HEAD> section of the HTML.

  7. Click OK
    The external style sheet is now attached to the file, and all style definitions automatically apply to the web page.

Excellence. Our Measure. Our Motto. Our Goal.