ProductsStyleVisionProgrammer ToolsCSS

Altova StyleVision® 2012 supports CSS styles – including CSS3 (requires Internet Explorer® 9) – to help you design advanced Web pages based on XML, XBRL, and database source data in an intuitive design interface.

Support for CSS

StyleVision includes full support for CSS (Cascading Stylesheets), a stylesheet language for adding style and presentation to HTML documents. CSS provides several advantages, including precise visual styling capabilities, cross-browser compatibility, the ability to make changes that affect multiple elements in a single step, and much more.

StyleVision provides built-in CSS style rules, which can be applied globally or to individual elements. You may also import external CSS documents to leverage previous work. Global and imported CSS rules are available in the StyleVision Style Repository window, where you can edit style values by typing them in directly or selecting them from drop-down menus and entry helper dialog boxes.

	View Flash demo

When styles are defined locally, the style rules are applied directly to the component you have selected in your design. These local rules have precedence over both global style rules and style rules in external CSS stylesheets that apply to that component.

The Styles entry helper window makes it easy to define local style rules by either entering values directly or selecting them from drop-down menus and entry helper dialogs. Simply select the component you wish to style on the design pane or from the Design Tree window, and the Style window will display the available options for that element as well as its related component types. For instance, if an element you select is part of a table, the table and its related components will be listed under the selected element. This way, you can define styling for a single component or for all instances of that type of component in one view.

Dynamic Selection of CSS Files

StyleVision supports multiple CSS files in a single design and allows you to use XPath to select individual CSS files for output to HTML and Authentic electronic forms. This feature provides StyleVision designers with even more control over how content appears by enabling them to base the choice of CSS on end user input or other parameters.

The XPath is evaluated at the beginning of output processing so that the appearance of the entire document can be controlled – designers can select a single CSS or all CSS files associated with the design.

To select a CSS file based on dynamic input, right click on the arrow next to one of the CSS files in the CSS Files section of the Design Overview and click Select One CSS File with XPath.

This will invoke the Select One CSS File with XPath dialog box.

Click the XPath button to invoke the XPath Expression dialog box and specify the conditions under which the selected CSS file will be applied.

Composite Styles

StyleVision also allows you to control multiple style features of a single attribute simply by assigning a composite style. Font size, color, alignment, and background color are just some of the style features that can be applied simultaneously via a composite style. Composite styles are easily assigned and can be applied to all output formats (i.e., HTML, PDF, RTF, Word, and Authentic electronic forms).

Composite styles can be defined in an XML schema or built on the fly in XPath.

In an XML schema, composite styles are created as attributes. For example, the "total" attribute of the numbers element in the XML below declares two style features (alignment and font color).

<numbers total="text-align: center; color: blue">

This attribute of the numbers element can now be selected within a StyleVision design.

Alternatively composite styles can be referenced from an internal or external CSS stylesheet.

Composite styles can also be created via XPath, allowing you to control how design elements are presented based on user input or other parameters. Simply click the XPath button at the composite style attribute in the Properties sidebar to invoke the XPath dialog box.

Then enter the style commands in the dialog box.

Composite styles offer you greater flexibility and more control over how content is presented, allowing you to develop more visually sophisticated and interactive output.

See how CSS enhances visual stylesheet design in StyleVision® 2012 to help you easily create advanced, eye-catching Web pages for your XML and database data. Download a free 30-day trial of StyleVision.