TechNote

How to create document-level Cascading Style Sheets

This TechNote offers instructions on creating and changing the various types of styles which can be found in Cascading Style Sheets (CSS). For an introduction to the concepts behind CSS styles, consult An Overview of Cascading Style Sheets (TechNote tn_15320).

CSS styles, which provide pre-designated formatting to control the appearance of Web page content, can be located at the document level (in the HTML page itself) or in an external style sheet. This TechNote offers in-depth instructions on adding styles at the document level. See How to create an external Cascading Style Sheet (TechNote tn_12922) to create external style sheets.

• Document-level style sheets
  • Adding a Custom Style (class)
  • Adding a redefined HTML Tag style
  • Adding a CSS Selector style
• Changing a style

Document-level style sheets

When you choose to make a style, you have several options for the type of style it will be: Custom Style (class), redefined HTML tag, or CSS Selector. Making each of the following examples of style types will acquaint you with the functionality of CSS styles in general and the purpose and use of each type of style in particular.

Note: For information on specific style settings (Type, Background, Block, Box, Border, List, Positioning, Extensions) for Web elements, choose Help > Using Dreamweaver> Inserting and Formatting Text > Using CSS Style Sheets > Creating a CSS Style in Dreamweaver. This sections provides a detailed description of each of the style settings and the many options.

Adding a Custom Style (class)

1. Click the New Style button at the bottom of the CSS Styles panel (choose Windows > CSS Styles to open this panel). See Example 1 for Dreamweaver 4 and later versions to view the buttons at the bottom of the CSS Styles panel.
2. Not necessary for Dreamweaver 3 users: In the New Style dialog box, select This Document Only from the Define in options.
3. Select Make Custom Style (class) under Type.
4. After selecting this type of style, type the name of your custom style ( Example 2). For this example, type the name.inset.
5. Click OK.
6. The Style Definition dialog box appears ( Example 3).
7. Define your style. To follow the above example make the following choices for Type:
   • Font: Times New Roman, Times, serif
   • Size: 12 points
   • Style: italic
   • Line Height: 2 ems
   • Weight: bold
   • Color: #0000FF (blue)
8. Click OK. Because the type of style chosen was custom, the name of the style will now appear on the CSS Styles panel.
9. To apply this custom style to text on a Web page:
   1. Select text or a range of text.
      
      Note: You can place the insertion point in a paragraph to apply the style to the entire paragraph or you can specify a tag to which the CSS should be applied by selecting the<p> tag with the tag selector at the bottom left of the Document window.
   2. Click the style name in the CSS styles menu.
   View Example 4 to see text to which the above document-level style has been applied.

Adding a redefined HTML Tag style

1. Click the New Style button at the bottom of the CSS Styles panel (choose Windows > CSS Styles to open this panel). See Example 1 for Dreamweaver 4 and later versions to view the buttons at the bottom of the CSS Styles panel.
2. Not necessary for Dreamweaver 3 users: In the New Style dialog box, select This Document Only from the Define in options.
3. Select Redefine HTML Tag under Type.
4. Choose an HTML tag to redefine by clicking in the tag pop-up list. To follow the example in these instructions, choose the h1 tag in the list of HTML tags (see Example 5 for Dreamweaver 4).
5. Click OK.
6. The Style Definition dialog box appears.
7. Define your style. To follow the above example, choose the Color #00FF00 (green) for Background Color in the Background style definitions.
8. Click OK. The new HTML Tag-type style will not be listed on the Custom Styles panel.
9. To apply this redefined HTML tag style to a block of text on a Web page:
   1. Select a block of text.
      
      Note: You can place the insertion point in a paragraph to apply the style to the entire paragraph or you can specify a tag to which the CSS should be applied by selecting the tag with the tag selector at the bottom left of the Document window.
   2. Choose Heading1 in the Format pop-up list on the Property inspector.
   View Example 6 to see the block of text to which the above redefined HTML tag has been applied as well as the Property inspector with the selection of Heading1 in the Format pop-up list.

Adding a CSS Selector style

1. Click the New Style button at the bottom of the CSS Styles panel (choose Windows > CSS Styles to open this panel). See Example 1 for Dreamweaver 4 and later versions to view the buttons at the bottom of the CSS Styles panel.
2. Not necessary for Dreamweaver 3 users: In the New Style dialog box, select This Document Only from the Define in options.
3. Select Use CSS Selector under Type. This choice allows you to:
   • create a selector for a style which will affect elements in one tag only when those elements are nested inside of another tag (known as a contextual selector), or
   • create an ID Selector, which redefines the formatting for all tags containing that ID attribute.
   Contextual or ID Selectors are generally used only by advanced developers. In most situations, naming a Custom style or redefining an HTML tag (instructions for both above) will meet the needs of most users.
   
   Note: You can also choose what is called a "pseudo-class" for the states of a link by clicking on the down-facing triangle on the Selector text box. [To eliminate the underline in links, see How to remove the underline from linked text (TechNote tn_14088).]
   
   For this example, you will use a CSS Selector to modify text, but only when the text is inside of a table cell.
4. In the Selector text box, type two HTML tags with a space in between them. Or, to follow this example, type the following:
   
   td p
   
   Note: On the Macintosh you will have to select and delete a:hover in the text box before typing in the td p. Also note that not all combinations of tags will render as you might expect in different browsers. Test all CSS selector combinations in different browsers on different operating systems to see if the style renders consistently.
5. Click OK.
6. The Style Definition dialog box appears.
7. Define your style. To follow the above example, enter the following settings in the Type style section:
   • Font: Courier New, Courier, mono
   • Size: medium
   • Style: normal
   • Weight: bold
   • Color: #FF0000 (red)
8. Click OK. The new CSS Selector style will not be listed on the Custom Styles panel.
9. To apply this CSS Selector style to text in a table cell:
   1. Select text in a table cell.
      
      Note: You can place the insertion point in a paragraph to apply the style to the entire paragraph or you can specify a tag to which the CSS should be applied by selecting the tag with the tag selector at the bottom left of the Document window.
   2. Choose Paragraph in the Format pop-up list on the Properties inspector.

Changing a document-level style

1. Choose Text > CSS Styles > Edit Style Sheet. Or, click the Edit Style Sheet (in Dreamweaver 3, the Open Style Sheet) button at the bottom of the CSS Styles panel (choose Windows > CSS Styles to open this panel).
2. Select the style you want to change in the Edit Style Sheet dialog box.
3. Click Edit.
4. The Style Definition dialog box appears.
5. Change your style definitions.
6. Click OK.
7. Click Done on the Edit Style Sheet dialog box. Web page elements to which the style has been applied will update automatically.

Additional Information

---

For more information on CSS, consult these Macromedia articles and TechNotes:

• Using Cascading Style Sheets
• Creating different CSS style sheets for different platforms
• Turning off link underlining
• Removing CSS Classes from a Dreamweaver page (TechNote tn_15119)
• How to remove the underline from linked text (TechNote tn_14088)
• How Can I update HTML styles? (TechNote tn_14245)

The Inserting and Formatting Text sections of Using Dreamweaver and Dreamweaver Help provide additional material on the subject of CSS. See also W3C's recommendations for CSS, as well as an excellent listing of resources devoted to CSS, the W3C's Cascading Style Sheets home page.

Search Support

---