About HTML Styles

HTML Styles are applied to all elements on a survey page and to elements within other elements on a page. A style defines a specific look and feel, and includes specifications for colors, typography, size and positioning. One style can define how a question text is to look, a second how the error messages are to be displayed, a third how the question area (skin) should look etc.

You can create and use any number of styles in a survey, and each style can be used any number of times, in any number of survey pages. The HTML styles used in a survey are listed in the Survey Tree toolbox's HTML Styles folder.

Note: As browsers don't support styling in watermark text, HTML styling should not be applied to the labels for "Other" answers.

To create a new style, the easiest method is to duplicate an existing style and edit the copy. To do this:

1. In the Survey Designer page, Survey Tree toolbox, expand the HTML Styles folder.
2. Find a style that resembles the one you wish to create, right-click on it and select Duplicate from the drop-down menu.

A copy is made of the selected style and placed in the HTML Styles folder. The new style will have the name "copy_of_<original style name>", and will be project-specific.

3. Right-click on the new style and select Rename from the drop-down menu, then give the style a logical name.

Note: Two or more styles can have the same name as long as the styles are of different type (class, ID, tag, complex). If you want the new style to have the same name as an existing style, you must change the style type before attempting to change the name.

4. Right-click on the style and select Properties to open the style's Properties page, and edit the style as required (go to HTML Style Properties Overview for more information).

Note: All survey pages delivered will include a viewport meta tag to improve the experience on mobile devices for respondents. The following meta tag will be included in all survey pages delivered to respondents:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

For more information on HTML Styles, visit the following websites:

http://msdn2.microsoft.com/en-us/library/ms535240.aspx

http://www.w3schools.com/css/css_reference.asp

http://www.htmlhelp.com/reference/css/properties.html

http://www.w3.org/TR/REC-CSS2/

http://www.blooberry.com/indexdot/css/propindex/font.htm