2 Domain Hosting

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 types of style sheets, see Types of Style Sheets in this collection's document, Cascading Style Sheets: An Overview.

For more information on the advantages of CSS and types of CSS styles, see Overview of Cascading Style Sheets. 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. Other helpful CSS documentation includes Select CSS terms, Formatting with CSS, and Measurement Units and Color References.

This document supplies the following information for creating both embedded and external style sheets:

• Types of Styles
• Creating Cascading Style Sheets
• Referencing External Style Sheets

Types of Styles

Dreamweaver allows you to define three different types of CSS styles: existing HTML tags, custom styles, and CSS selectors.

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., Heading 1). 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.

Creating 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. 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 STYLE
   The New CSS Style dialog box appears.
   
4. To determine the type of style you will be defining, from Type, select Make Custom Style (class), Redefine HTML Tag, or Use CSS Selector
5. 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
6. 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
7. Click OK
   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 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.
      

       

9. From the Category section, select the style element you would like to redefine
10. In the corresponding category section to the right, select the appropriate options
11. Repeat steps 9 and 10 until your style is 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.

Referencing 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 SHEET
   The Link External Style Sheet dialog box appears.
   
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.