Writing the CSS

A set of rules must be defined for describing how the XML document is to be rendered into the <oXygen/> Author. This is done using Cascading Style Sheets or CSS on short. 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.

[Note]Note

For more information regarding CSS, please read the specification http://www.w3.org/Style/CSS/. A tutorial is available here : http://www.w3schools.com/css/css_intro.asp

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, like 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. But any block that contains inline boxes is arranging its children in a horizontal flow. That is why the paragraph lines are also blocks, but the traditional "bold" and "italic" sections are represented as inline 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 "table-row" style. Similarly, the "row" elements must contain elements with "table-cell" style.

To make it easy to understand, the following section describes the way each element from the above schema is formatted using a CSS file. Please note that this is just one from an infinite number of possibilities of formatting the content.

report

This element is the root element of the 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 larger font. The block display should also be used - the next elements will be placed below it, and change its font 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 will have the same block display. To make it standout the background color is changed.

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

A line of text in the description. A specific aspect is not defined for it, just indicate that the display should be block.

line {
    display:block;
}
important

The important element defines important text from the description. Because it can be mixed with text, its display property must be set to inline. To make it easier to spot, the text will be emphasized.

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

The results element shows the list of test_names and the result 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 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;
}                        
                    
 

Figure 8.2. A report opened in the Author

A report opened in the Author