Oxygen XML Author plugin 13.2.0

Author Developer Guide | 164CSS StylesheetA set of rules must be defined for describing how the XML document is to be rendered into the Author. This is doneusing Cascading Style Sheets or CSS on short. CSS is a language used to describe how an HTML or XML documentshould 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 textand may flow one after the other, from left to right. These are called in-line boxes. There are also other type of boxesthat 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 avertical list of lines. The lines are also blocks. But any block that contains inline boxes is arranging its children in ahorizontal flow. That is why the paragraph lines are also blocks, but the traditional "bold" and "italic" sections arerepresented as inline boxes.The CSS allows us to specify that some elements are displayed as tables. In CSS a table is a complex structure andconsists 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 formattedusing a CSS file. Please note that this is just one from an infinite number of possibilities of formatting the content.reportThis element is the root element of the report document. It should be rendered as a box that containsall other elements. To achieve this the display type is set to block. Additionally some margins areset for it. The CSS rule that matches this element is:report{display:block;margin:1em;}titleThe title of the report. Usually titles have a larger font. The block display should also be used - thenext elements will be placed below it, and change its font to double the size of the normal text.title {display:block;font-size:2em;}descriptionThis element contains several lines of text describing the report. The lines of text are displayed onebelow the other, so the description will have the same block display. To make it standout thebackground color is changed.description {display:block;background-color:#EEEEFF;color:black;}lineA line of text in the description. A specific aspect is not defined for it, just indicate that the displayshould be block.line {display:block;}