External CSS Stylesheets

1.	In Design View, select the External item in the Style Repository window (screenshot below).

2.	Click the Add button at the top left of the Style Repository toolbar (see screenshot above).

3.	In the Open dialog that pops up, browse for and select the required CSS file, then click Open. The CSS file is added to the External item as part of its tree structure (see tree listing and screenshot below).

4.	To add an additional external CSS stylesheet, repeat steps 1 to 3. The new CSS stylesheet will be added to the External tree, after all previously added external CSS stylesheets.

Note:

You can also add an external CSS stylesheet via the Design Overview sidebar.

The tree of external CSS stylesheets is structured as follows (also see screenshot below):

Each CSS-file-location item can be edited in the Style Repository window; do this by clicking the Edit button

and selecting the required CSS file. The media to which that particular stylesheet is applicable can also be edited in the Style Repository window; do this by clicking the down arrow to the right of the item and selecting the required media from the dropdown list). The rules defined in the external CSS stylesheet are displayed in the Style Repository window, but cannot be edited. The Stylesheet, Rules, and individual Selector items in the tree can be expanded and collapsed by clicking the + and - symbols to the left of each item (see screenshot below).

To delete an external stylesheet, select the stylesheet and click the Reset button in the Style Repository toolbar.

Note:

Style rules with certain selectors will not be applied to RTF and PDF output. Such rules are commented: Will be discarded in PDF, RTF.

The external CSS stylesheets that are assigned in the Style Repository window will be imported into the HTML output file using the @import instruction. In the HTML file, this would look something like this:

The order in which the files are listed in the HTML file corresponds to the order in which they are listed in the External tree of the Style Repository. To change the order of the CSS stylesheets in the External tree, select the stylesheet for which the precedence has to be changed. Then use the Move Up

and Move Down

buttons in the Style Repository toolbar to reposition that stylesheet relative to the other stylesheets in the tree.

Important: What is important to note is that the lowermost stylesheet has the highest import precedence, and that the import precedence decreases with each previous stylesheet in the listing order. The order of import precedence in the listing shown above is: (i) ExternalCSS-3.css; (ii) ExternalCSS-2.css; (iii) ExternalCSS-1.css. When two CSS rules, each in a different stylesheet, address the same node, the rule in the stylesheet with the higher import precedence applies.

An external CSS stylesheet can be quickly replaced by another by clicking the Edit button

and browsing for the required stylesheet. The media to which an external CSS stylesheet is to be applied can be selected by pressing the dropdown box of the Media item of an external stylesheet, and there selecting the required media from the list of options.

Style Repository, for a description of the Styles Repository, in which external CSS stylesheets are assigned and managed.

CSS Support, for information about how to select the required level of CSS support in the browser.