Dreamweaver

Use visual aids with non-CSS layout block elements

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.

  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.