Using an External Style Sheet

When an item is to be displayed by Authoring, the system looks for the HTML style definition to be used (go to About HTML Styles for more information). The system checks all the style sheets available within the survey, in the specified order, and will use the 'last' version of the style definition that is found.

If you already have style sheets set up outside of Authoring, you do not have to re-define those styles inside Survey Layouts. You can enter the URL of the .css file that holds the definitions, and then refer to the style names directly in your survey. A style sheet that is not stored within Authoring is known as an external style sheet.

Note: An external style sheet will be checked last, so any styles defined in the external style sheet will take precedence over other "versions" of the style defined in other style sheets. In-line styles that are applied "outside" of the style sheets take final precedence and will override all other style definitions.

This process is normally used at the Theme level rather than at the individual question level, however once the URL is added to the theme Properties sheet, the styles that the style sheet contains can be used throughout the survey.

Accessing an External Style Sheet

Say for example that an externally-stored style sheet contains a style that you wish to apply to a piece of text in your survey. To use this style you must first tell the survey where the style sheet is located, and "connect" the style sheet to the survey:

1. Right-click on the Theme you are using and select Properties to open the Properties page for that Theme.
2. Type or copy the URL to the style sheet into the External Stylesheet URL field (go to Theme Properties for more information).

On saving, the link will be added to the survey head tag, and you can now make use of the styles defined in the external style sheet.

There are then two main methods of telling the survey when and where a style is to be used:

Typing HTML Code Directly into the survey

As the heading suggests, with this method you need to type code directly into the survey. As an example, assume the style sheet contains the style as follows:

.text {font-weight : bold; color : red}

and assume you wish to apply that style to some text - "A piece of text" - that is to appear on a page in your survey.

1. Go to the theme's Layout tab and toggle the Editor Mode button until you can view the HTML Editor.
2. Type into the HTML window the code:

...<p class="text">A piece of text</p>...

as in the example shown below.



Figure 1 - Example of the code to apply a style from an external style sheet

3. Save the changes.

Your "piece of text" will then be presented as defined in the external style sheet; in this case in bold, red text.

Setting an "external" Style on an Element's Properties

You can also elect to use a style from an external style sheet for any element for which a style can be selected. To do this, go to the element's Properties sheet.

The illustration below shows the drop-down list for the Style Name field for the Info nodes question skin. Note that styles defined in external style sheets are not included in the drop-down list of styles available for an element; you must type the name of the style into the appropriate field.

To use a style from an external style sheet for this element, type the name of the style "manually" into the style field (for this element, the Style Name field).

Figure 2 - Selecting a style for the Info nodes question skin

For further information on style sheets and HTML coding, try searching for "css" on the Internet.