Altova StyleVision 2024 Professional Edition

The SPS design document is styled with CSS rules. Style rules can be specified:

•In external CSS stylesheets. External CSS stylesheets can be added via the Design Overview sidebar and via the Style Repository sidebar.

•In global styles for the SPS, which can be considered to be defined within the SPS and at its start. (In the HTML output these global styles are defined within the style child element of the head element.) Global styles are defined in the Style Repository sidebar.

•Locally, on individual components of the document. In the HTML output, such rules are defined in the style attribute of individual HTML elements. Local style rules are defined in the Styles sidebar.

Each of the above methods for creating styles is described in detail in the sub-sections of this section (links above).

Terminology

A CSS stylesheet consists of one or more style rules. A rule looks like this:

 H1 { color: blue }

or

 H1 { color: blue;

           margin-top: 16px; }

Each rule has a selector (in the examples above, H1) and a declaration (color: blue). The declaration is a list of properties (for example, color) with values (blue). We will refer to each property-value pair as a style definition. In StyleVision, CSS styles can be defined in the Styles sidebar (local styles) and Style Repository sidebar (global styles).

Cascading order

The cascading order of CSS applies. This means that precedence of rules are evaluated on the basis of:

1.Origin. External stylesheets have lower precedence than global styles, and global styles have lower precedence than local styles. External stylesheets are considered to be imported, and the import order is significant, with the latter of two imported stylesheets having precedence.

2.Specificity. If two rules apply to the same element, the rule with the more specific selector has precedence.

3.Order. If two rules have the same origin and specificity, the rule that occurs later in the stylesheet has precedence. Imported stylesheets are considered to come before the rule set of the importing stylesheet.

CSS styles in modular SPSs

When an SPS module is added to another SPS, then the CSS styles in the referring SPS have priority over those in the added module. When multiple modules are added, then CSS styles in those modules located relatively lower in the module list have priority. For more information about modular SPSs, see the section, Modular SPSs.

CSS support in Internet Explorer

Versions of Internet Explorer (IE) prior to IE 6.0 interpret certain CSS rules differently than IE 6.0 and later. As a designer, it is important to know for which version of IE you will be designing. IE 6.0 and later offers support for both the older and newer interpretations, thus enabling you to use even the older interpretation in the newer versions (IE 6.0 and later). Which interpretation is used by IE 6.0 and later is determined by a switch in the HTML document code. In an SPS, you can specify whether the HTML and Authentic View output documents should be styled according to Internet Explorer's older or newer interpretation. You should then set CSS styles according to the selected interpretation. For more details, see Properties: CSS Support.