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