1.5

Table Of Contents
Styles pane
The Styles pane shows which CSS style rules apply to the currently selected element.
A link next to a style rule will open the file where that particular style is defined. This can be
either a CSS file or the source file of a section if local formatting was used (see "Styling and
formatting" on page453).
A crossed-out style rule signals that it was overruled by another style rule. This happens when:
l A more specific, and therefore more important rule, is encountered for the same element.
See "Using a more specific CSS rule" on page460 to learn more about the specificity of
style rules.
l A rule with the same importance is read after the first rule. Not only is the order of the rules
in a CSS file important, but also the order in which the style sheets are read. The style
sheets that are included with a section are read in the specified order; see "Determining
the order in which style sheets are read" on page461.
Workspace
The Workspace pane is where everything comes together. It is the contents of the page, the
WYSIWYG editor that shows what the output will look like.
The Workspace contains three tabs. To switch between the tabs, click on the tab at the bottom
or select View > Design View, Preview View or Source View on the menu.
Source Tab
The source tab displays the HTML source for the template, including HTML Headers, CSS and
HTML code. The source is displayed in a color-coded text editor, to quickly visualize the code.
In this tab changes and adjustments can be made to the code.
To the left of the Source tab, a bar helps visually identify the start and stop of an element. For
example when clicking on the opening <table> element, this bar marks the whole <table> and
all its contents, until the ending </table> tag.
The top of the Design tab contains an area with the following options:
l
Breadcrumbs: Displays the element type where the cursor is located and any of its
parent elements. Elements with classes or IDs show these details next to them, for
instance div #contents > ol.salesitems > li. Click on an element in the
Page 641