Setting CSS Property Values
|
| Previous Top Next |
Setting CSS Property Values |
Style properties are defined in the Styles sidebar (screenshot below) for the selected component or components. The selection is made in two steps. First, the component is selected in the SPS. This causes the descendant component types and any associated predefined formats to appear in the Styles For column of the Styles sidebar (see screenshot below). Second: In the Styles For column, the descendant component type is selected. In the screenshot below, the paragraph component type (the predefined format) is selected. Now style properties can be defined for the predefined format. If, in the screenshot below, the 3 comboboxes entry had been selected, style properties could have been defined for all three combo boxes in one go.
Style property groups
The available style properties are CSS properties and are defined in 11 groups:
Style Group |
Properties |
box |
Border, margin, and padding settings. |
color |
Color of node content; background properties. |
common |
Includes class, display, position, float, z-index among others. |
details |
Height, width, and vertical alignment properties. |
effects |
The clip, overflow, and visibility properties. |
font |
Font specifications, such as family, size, style, weight. |
IE |
Internet Explorer-specific properties. |
numbering |
List markers, counters, and quotes. |
paged media |
Settings for page-breaks, orphans, and widows. |
text |
Text properties such as text-align, text-decoration, and text-transform, as well as other text-related properties such as letter-spacing and word-spacing. |
UI |
Cursor style setting for user interface. |
| Note: | The visibility, display, float, and position properties are not applied in Design View and Authentic View. |
Property values can be entered in one, two, or three ways, depending on the property:
| • | Entered directly in the Value column. To do this, select a property, double-click in its Value column, enter the value using the keyboard, and press Enter or click anywhere in the GUI. |
| • | By selecting a value from the dropdown list of the combo box for that property. Click the down arrow of the combo box to drop down the list of property-value options. In the screenshot below, the options for the background-repeat property are displayed. Select the required value from the dropdown list. |
| • | By using the sidebar at the right-hand side of the Value column for that property. Two types of sidebar are available, and these are available only for properties to which they are relevant: (i) a color palette for selecting colors (in the screenshot below, see color and background-color properties), and (ii) a dialog for browsing for files (in the screenshot below, see the background-image property). |
Modifying or deleting a property value
If a property value is entered incorrectly or is invalid, both the property and the value are displayed in red. To modify the value, use any of the applicable methods described in the previous section, Entering Property Values.
To delete a property value, double-click in the Value column of the property, delete the value using the Delete and/or Backspace key, and then press Enter.
See also:
Styles sidebar, for a description of the Styles sidebar.
Defining CSS Styles Locally, for an overview of how to use local styles.
Defining CSS Styles Globally, for information about using global styles.
External CSS Stylesheets, for information about using external CSS stylesheets.
CSS Support, for information about how to select the required level of CSS support in the browser.
|