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?

Macromedia Dreamweaver 8

Creating Style Sheets

Cascading Style Sheets (CSS) control formatting for web pages by storing definitions that prescribe styles for a page's individual elements or HTML tags. You can create embedded styles, which define styles within the individual web page's HTML code, or external style sheets, which define styles by linking to a style sheet document (.css).

For more information on the advantages of CSS and types of CSS styles, see Overview of Cascading Style Sheet. For information on applying, editing, and deleting CSS styles, see Working with Styles. For information on accessing and using the CSS Styles Tab, see Using the CSS Styles Tab.

return to topTypes of Styles

Dreamweaver allows you to define three different types of CSS styles: existing HTML tags, custom (class styles), and CSS selector (advanced styles) .

Redefining Existing HTML Tags

HTML code consists of tags that prescribe behaviors for web display. Each tag has a default style that is applied each time the tag is used (e.g., <h1>, <li>). When you use CSS to redefine the style of an HTML tag, all text or elements within those tags are updated to reflect the changes.

Defining Custom Styles

Custom styles are applied to individual elements of a web page. Custom styles are extremely useful for web designers because they allow designers to create variations of a style and apply it to existing HTML tags, text, or objects at their discretion. This type of style gives designers flexibility that Redefining Existing HTML Tags and Defining CSS Selectors (which both define the style of tags at every appearance) do not offer. For additional information on the HTML considerations of custom styles, see Formatting with CSS Styles.

Defining Custom Styles: HTML Considerations

As custom styles are defined, the style definitions are stored in the CSS portion of a document. However, when you apply a custom, or 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.

Defining CSS Selectors

CSS Selector 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, active link, visited link, and hover.

a: link
Defines the style of an idle link

a: visited
Defines the style of a previously visited link

a: active
Defines the style of a link while it is active

a: hover
Defines the style of a link when the mouse travels over it

return to topCreating Cascading Style Sheets

You can create CSS style sheets at any time in your web 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 CSS.

  1. Access the CSS Styles tab

  2. From the CSS Styles tab, click NEW CSS STYLENew CSS Style
    The New CSS Style dialog box appears.
    New CSS Style dialog box

  3. To determine the type of style you will be defining, from Selector Type, select Class (can apply to any tag , Redefine HTML Tag, or Use CSS Selector

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

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

  6. Click OK
    If you are creating an embedded style, the CSS Style definition dialog box appears. Go to Step 9.

  7. 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 and other navigational tools, select a save location for the style sheet
    2. In the Filename 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.
      CSS style definition dialog box

  8. From the Category section, select the style element you would like to redefine

  9. In the corresponding category section to the right, select the appropriate options

  10. Repeat steps 9 and 10 until your style is complete

  11. 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 topReferencing External Style Sheets

After you have created an external style sheet, you need to attach the style sheet to the files which will reference it.

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

  2. Access the CSS Styles tab

  3. From the CSS Styles tab, click ATTACH STYLE SHEETAttach style sheet
    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 and other navigational tools, locate and select the style sheet

    3. Click OK

  5. From the Add As option, select Link or Import
    HINT: Most web designers choose to reference 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.

  6. Click OK
     The external style sheet is now attached to the file, and all style definitions will automatically apply to the file.

Excellence. Our Measure. Our Motto. Our Goal.