Stylesheets and CSS

CSS, an acronym for Cascading Style Sheet, is a nearly ubiquitous part of Web programming. It is the set of instructions which largely governs how webpage content is displayed. Webpages created by IntelliSurvey are no exception. It therefore follows that Survey Programmers (SPs) can use CSS to customize one or multiple pages in a survey to suit project needs. There are many resources around the Web which describe CSS syntax. This page explains the different ways to inject CSS into survey pages.

Syntax

Widget

A css tag on a widget only applies to that widget. Other elements that may match the indicated CSS selectors that are part of other widgets will not be styled. The platform will inject the CSS code input onto the survey webpage where the widget is defined. A CSS selector for the parent widget is automatically prepended to your CSS so it should not be included.

1. Question
type: text
css: CSS here

Page

A pagecss tag applies styling to the entire survey web page on which the parent widget resides.

1. Question
pagecss: CSS here

Examples

Styling a widget - basic

In this example, the<div> elements created by the Q1 widget with the i-questext class will display fonts at a size of 40 pixels.

See demo See code Restart demo

Styling a widget - multiple rules

The <div> with an i-questext class (in this case, the question text) has 200% font size and is colored brown.

The label[for='Q2-1'] statement option 1 of Q2 and sets the text color to orange; then, the same syntax is used to make the option 2 text green.

See demo See code Restart demo

Styling a widget - Bad example

3. Why do you feel this way?
type: textbox
css: #Q3-wrapper div.i-questext {font-weight: bold;} #Q1-wrapper div.i-questext {font-weight: italics}

This will not work. IntelliSurvey prepends the parent element's ID to the CSS automatically; including #Q3-wrapper here will break the selector. Additionally, the attempt to style children of the #Q1-wrapper element will fail, because they are not contained within the Q3 widget.

Styling a page

Unlike the regular css tag, the pagecss tag does not contain the parent element selector. This means that the styling rules affect every matching element on the page. The preface text for Q3, as well as the intro text for both Q3 and Q3X are all styled by the CSS from the pagecss tag.

See demo See code Restart demo

Using local.css

It is generally preferable to put any custom CSS in the local.css file, accessible from the Survey File Manager. This carries several advantages, chiefly:

• The survey page loads initially with CSS already applied.
• The CSS may be endlessly tweaked, and survey pages should be browser-refreshed to check changes. There is no need to rebuild the survey source.

To modify the local.css file, open Survey File Manager (Structure>Files) and navigate to the /_s/ directory. Click on the local.css file.

Simply add your CSS code to this file, and click the Save icon to save it. A dialog will appear asking the user to confirm the file changes. Note the heading will read "local.css <changed>" if any unsaved edits/additions have been made to the file.

IntelliSurvey will automatically load all CSS in this file when rendering survey web pages.

Referencing other CSS files

Instead of using local.css, Survey Programmers may reference external CSS files using the @import statement. In the below snippet, every page within the 'inside' group will use the alt.css file that has been uploaded to the survey via the File Manager.

startgroup: inside
pagecss: @import url("/s/[* appid() *]/alt.css");