Layout Using CSS

Using cascading style sheets to define the appearance of layers in your page lets you share an entire design across multiple pages. This means that you can define styles that control the position, size, visibility, and other attributes of all the elements in your site:

1. Click the CSS Styles tab in the Design panel group to open the CSS Styles panel.
2. In the CSS Styles panel, click the New CSS Style button.

The New CSS Style dialog opens. You'll define a style to be applied to one of the layers in your page.

3. Select the Class radio button and name the style. Remember to preface the name with a period, since you're creating a custom class.
4. Make sure the appropriate style sheet is selected or, if necessary, create a new one.
5. Click OK to close the dialog.

The CSS Style Definition dialog opens.

6. Highlight Positioning in the Category list.
7. As in the Property Inspector, you can specify the width, height, placement, and clip values for a layer.
8. If necessary, use the other categories in the CSS Style Definition to define other attributes, such as the background color and the appearance of text in the layer.
9. Click OK.

You can now apply the custom style to a layer on the page: Select the layer; then right-click the style in the CSS Style panel and select Apply. You can also select the style from the Class drop-down menu in the Property Inspector.

Tip:

If you previously positioned the layer using the Property Inspector, these values may override those contained in the style. Delete the values from the fields in the Property Inspector; this forces the layer to use the values defined in the style.