Global Styles
Global styles are defined for the entire SPS design in the Style Repository and are listed in the Style Repository under the Global heading. They are passed to the HTML output document as CSS rules. In the HTML document, these CSS rules are written within the /html/head/style element.
In the Style Repository, a global style is a single CSS rule consisting of a selector and CSS properties for that selector. Creating a global style, therefore, consists of two parts:
•Adding a new style and declaring the CSS selector for it
•Defining CSS properties for the selector
Supported selectors
The following selectors are supported:
•Universal selector: written as *
•Type selectors: element names, such as h1
•Attribute selectors: for example, [class=maindoc]
•Class selectors: for example, .maindoc
•ID selectors: for example, #header
Adding a global style
To add a global style to the SPS design, do the following:
1.In Design View, select the Global item in the Style Repository window (screenshot below).
| 2. | Click the Add button at the top left of the Style Repository toolbar (see screenshot above). A global style is inserted in the Global tree with a * selector (which selects all HTML elements); the universal selector is the default selector for each newly inserted global style. |
| 3. | To change the selector from the default universal selector, double-click the selector and edit it. |
| 4. | Now set the CSS property values for the selector. How to do this is explained in the section Setting Style Values. |
| 5. | To add another global style, repeat steps 1 to 4. The new global style will be added to the Global tree, below all previously added global styles. |
| Note: |
•Global styles can also be inserted before a selected global style in the Global tree by clicking the Insert button in the Style Repository window. The Add and Insert buttons are also available via the context menu that appears when you right-click a global selector.
•A global style with a selector that is an HTML element can be inserted by right-clicking an item in the Global tree, then selecting Add Selector | HTML | HTMLElementName.
Editing and deleting global styles
Both a style's selector as well as its properties can be edited in the Style Repository window.
•To edit a selector, double-click the selector name, then place the cursor in the text field, and edit.
•For information about defining and editing a style's property values, see Setting Style Values. (The style properties can be displayed in three possible views. These views and how to switch between them are described in Views of Definitions.
To delete a global style, select the style and click the Reset button in the Style Repository toolbar.
Changing the precedence of global styles
Global styles that are assigned in the Style Repository window are placed as CSS rules in the /html/head/style element. In the HTML file, they would look something like this:
<html>
<head>
<style>
<!--
h1 { color:blue;
font-size:16pt;
}
h2 { color:blue;
font-size:14pt;
}
.red { color:red;}
.green { color:green;}
.green { color:lime;}
-->
</style>
</head>
<body/>
</html>
The order in which the global styles are listed in Authentic View and the HTML document corresponds to the order in which they are listed in the Global tree of the Style Repository. The order in Authentic View and the HTML document has significance. If two selectors select the same node, then the selector which occurs lower down the list of global styles has precedence. For example, in the HTML document having the partial listing given above, if there were an element <h1 class="green">, then three global styles match this element: that with the h1 selector and the two .green class selectors. The color property of the .green selector with the color lime will apply because it occurs after the .green selector with the color green and therefore has a higher precedence. (Class selectors always have a higher precedence than node selectors, so both .green selectors will have a higher precedence than the h1 selector regardless of their respective positions relevant to the h1 selector.) The font-size of the h1 style will, however, apply to the <h1> element because there is no selector with a higher precedence that matches the <h1> element and has a font-size property.
To change the precedence of a global style, select that style and use the Move Up and Move Down buttons in the Style Repository toolbar to reposition that global style relative to the other global styles in the tree. For example, if the .green global style were moved to a position before the .red style, then the color property of the .red style would have precedence over that of the .green style.
Note, however, that class selectors always have precedence over type selectors. So, if the selector order were changed to .red .green h1 h2, then h1 and h2 would still be green.