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 arent 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:
- 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.
- 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:
- Save the file.
- In Design view, open the page to which you want to attach the new styles.
- Select Text > CSS Styles > Design-time.
- 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.
- 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.
- About CSS layout visualization
- Viewing CSS layout blocks
- Using Design-Time style sheets