CSS Stylesheet

A set of rules must be defined for describing how the XML document is to be rendered in Author mode. This is done using Cascading Style Sheets (CSS). CSS is a language used to describe how an HTML or XML document should be formatted by a browser. CSS is widely used in the majority of websites.

The elements from an XML document are displayed in the layout as a series of boxes. Some of the boxes contain text and may flow one after the other, from left to right. These are called in-line boxes. There are also other type of boxes that flow one below the other (such as paragraphs). These are called block boxes.

For example, consider the way a traditional text editor arranges the text. A paragraph is a block, because it contains a vertical list of lines. The lines are also blocks. However, blocks that contains in-line boxes arrange its children in a horizontal flow. That is why the paragraph lines are also blocks, while the traditional "bold" and "italic" sections are represented as in-line boxes.

The CSS allows us to specify that some elements are displayed as tables. In CSS, a table is a complex structure and consists of rows and cells. The table element must have children that have a table-row style. Similarly, the row elements must contain elements with a table-cell style.

To make it easy to understand, the following section describes how each element from a schema is formatted using a CSS file. Note that this is just one of infinite possibilities for formatting the content.

report

This element is the root element of a report document. It should be rendered as a box that contains all other elements. To achieve this the display type is set to block. Additionally, some margins are set for it. The CSS rule that matches this element is:

report{
    display:block;
    margin:1em;
}

title

The title of the report. Usually titles have a large font. The block display is used so that the subsequent elements will be placed below it, and its font is changed to double the size of the normal text.

title {
    display:block;
    font-size:2em;    
}

description

This element contains several lines of text describing the report. The lines of text are displayed one below the other, so the description has the block display. Also, the background color is changed to make it standout.

description {
    display:block;
    background-color:#EEEEFF;
    color:black;
}

line

A line of text in the description. A specific aspect is not defined and it just indicates that the display should be block style.

line {
    display:block;
}

important

The important element defines important text from the description. Since it can be mixed with text, its display property must be set to inline. Also, the text is emphasized with boldto make it easier to spot.

important {
    display:inline;
    font-weight:bold;
}

results

The results element displays the list of test_names and the results for each one. To make it easier to read, it is displayed as a table, with a green border and margins.

results{
    display:table;
    margin:2em;
    border:1px solid green;
}

entry

An item in the results element. The results are displayed as a table so the entry is a row in the table. Thus, the display is table-row.

entry {
    display:table-row;
}

test_name, passed

The name of the individual test, and its result. They are cells in the results table with the display set to table-cell. Padding and a border are added to emphasize the table grid.

test_name, passed{
    display:table-cell;
    border:1px solid green;
    padding:20px;
}

passed{
    font-weight:bold;
}

The full content of the CSS file test_report.css is:

report {
    display:block;
    margin:1em;
}

description {
    display:block;
    background-color:#EEEEFF;
    color:black;
}

line {
    display:block;
}

important {
    display:inline;
    font-weight:bold;
}

title {
    display:block;
    font-size:2em;    
}

results{
    display:table;
    margin:2em;       
    border:1px solid green;
}

entry {
    display:table-row;
}

test_name, passed{
    display:table-cell;
    border:1px solid green;
    padding:20px;
}

passed{
    font-weight:bold;
}                        

Report Rendered in Author Mode

Associating a Stylesheet with an XML Document

The rendering of an XML document in the Author mode is driven by a CSS stylesheet that conforms to the version 2.1 of the CSS specification from the W3C consortium. Some CSS 3 features, such as namespaces and custom extensions, of the CSS specification are also supported. Oxygen XML Editor also supports stylesheets coded with the LESS dynamic stylesheet language.

There are several methods for associating a stylesheet (CSS or LESS) with an XML document:

1. Insert the xml-stylesheet processing instruction with the type attribute at the beginning of the XML document. If you do not want to alter your XML documents, you should create a new document type (framework).

   CSS example:

   <?xml-stylesheet type="text/css" href="test.css"?>

   LESS example:

   <?xml-stylesheet type="text/css" href="test.less"?> 

   Note

   XHTML documents need a link element, with the href and type attributes in the head child element, as specified in the W3C CSS specification. XHTML example:

   <link href="/style/screen.css" rel="stylesheet" type="text/css"/>

   Tip

   You can also insert the xml-stylesheet processing instruction by using the Associate XSLT/CSS Stylesheet action that is available on the toolbar or in the Document ⇒ XML Document menu.
2. Configure a Document Type Association by adding a new CSS or LESS file in the settings. To do so, open the Preferences dialog box (Options ⇒ Preferences) and go to Document Type Association. Edit the appropriate framework, open the Author tab, then the CSS tab. Press the New button to add a new CSS or LESS file.

   Note

   The Document Type Associations are read-only, so you need to extend an existing one.

You can read more about associating a CSS to a document in the section about customizing the CSS of a document type.

If a document has no CSS association or the referenced stylesheet files cannot be loaded, a default one is used. A warning message is also displayed at the beginning of the document, presenting the reason why the CSS cannot be loaded.

Document with no CSS association default rendering