Associating External CSS with Styler Stylesheets
There are two methods in which Arbortext Editor stylesheets can be configured to provide the CSS styling for HTML-based outputs. The CSS can either be embedded in the HTML or be provided as a separate file linked to the HTML. However, there may be few scenarios when a user would want to include further CSS styling for the HTML generated by Arbortext Styler stylesheets. Following are examples of different scenarios:
• Arbortext Styler does not create ‘responsive’ styling, but a separate stylesheet can be created to apply the @media tests and subsequent styling changes to provide the desired look and feel for different viewport sizes.
• To provide styling options which are not available through the Arbortext Styler interface.
To associate external CSS stylesheets with HTML output, follow these steps:
1. In Arbortext Styler, open the Stylesheet Properties dialog box.
2. Click theHTML File or the HTML Chunk tab.
3. To associate an external CSS file, click Add and enter the location of the file in the Associated CSS Files area at the bottom of the dialog box.
| A file picker is not provided as he location is usually a web URL. Local files can also be linked, but if using relative location paths, they must be relative to where the HTML file is deployed. |
You can edit the path to the selected CSS file by clicking Edit You can remove the linked file by clicking Delete.
The published HTML output will now include a <link> inside the <head> element, which specifies the path to each of the external files as shown in the following image:
The associated stylesheets are listed after those created from Styler (in this case external stylesheets have been selected) to allow the external CSS to override any declarations that Arbortext Styler generates.
