Using Design-time style sheets with CSS layout blocks

Using Design-time style sheets with CSS layout blocks

You can use a Design-time style sheet to display the backgrounds, borders, or box model for elements that aren’t normally considered CSS layout blocks. To do so, you must first create a Design-time style sheet that assigns the display:block attribute to the appropriate page element.

To use CSS layout block visual aids with non-CSS layout block elements:

  1. Create an external CSS style sheet by selecting File > New, selecting Basic page in the Category column, selecting CSS in the Basic page column, and clicking Create.
  2. In the new style sheet, create rules that assign the display:block attribute to the page elements you want to display as CSS layout blocks.

    For example, if you wanted to display a background color for paragraphs and list items, you could create a style sheet with the following rules:

    p{
    display:block;
    }
    li{
    display:block;
    }
    
  3. Save the file.
  4. In Design view, open the page to which you want to attach the new styles.
  5. Select Text > CSS Styles > Design-time.
  6. In the Design-time Style Sheets dialog box, click the plus (+) button above the Show Only at Design Time text box, select the style sheet you just created, and click OK.
  7. Click OK to close the Design-time Style Sheets dialog box.

    The style sheet is attached to your document. If you had created a style sheet using the previous example, all paragraphs and list items would be formatted with the display:block attribute, thereby allowing you to enable or disable CSS layout block visual aids for paragraphs and list items.

Related topics

  • About CSS layout visualization
  • Viewing CSS layout blocks
  • Using Design-Time style sheets


Getting Started with Dreamweaver
Dreamweaver Basics
Working with Dreamweaver Sites
Laying Out Pages
Laying Out Pages with CSS
Managing Templates
Adding Content to Pages
Working with Page Code
Preparing to Build Dynamic Sites
Making Pages Dynamic
Developing Applications Rapidly
 
ASPTreeView.com
 
Evaluation has Р·У¶Ѕ¶expired.
Info...