Skip to main content

Search

css and page css tags

  • Updated

Use the css and page css tags to customize the look and feel of a specific question/table or survey page.

'css' tag applied to a single widget

1. What is your name?
type: text
css: div.i-questext {font-size: 40px}

'page css' tag applied to the survey page

2. Why do you feel this way?
type: textbox
page css: div.i-questext {font-weight: bold; color: blue;}

2B. Will you ever change your mind?
ap: n
type: text

Tip! It is generally preferred to put custom CSS in the build.scss or local.css file in your survey if possible.

Details

  • A css tag on a widget only applies to that widget. This means, for example, you could target a CSS selector to style the question text on a specific question.
  • A page css tag applies styling to the entire survey web page on which the parent widget resides. This means, for example, you could target a CSS selector and style the question text on a specific question, and it would also style other questions or any other text on the page. 
  • When using the css tag, the CSS selector for the parent element ID, the "wrapper," and everything needed to target the specific element is automatically added for you. This makes it possible for your css tag rule to only affect the specified element.
  • The css and page css tags can support multiple rules.
  • You can reference CSS files hosted in your survey or another survey's Files applet using the @import statement on a page css tag.

Tip! Use your browser's developer tools to "inspect" the element on the screen that you wish to modify. Find the <div> class (and if needed, label) for the element. Then, reference the IntelliSurvey syntax for that element in your css or page css tag.

Additional examples

Applying multiple rules

The <div> with the i-questext class (question text) has 200% font size and is brown. To style other elements differently, use a label to apply specific rules. In the example below, label[for='Q2-1'] sets option 1 of Q2 to orange, while the same syntax makes option 2 green.

Styling a contratext table with 'css'

In the example below, we use the css tag to style the headings in a "contratext" table with bold font.

Styling a MaxDiff with 'page css'

Unlike the regular css tag, the page css tag does not automatically contain the parent element selector. Therefore the styling rules affect every matching element on the page.

In this example, we use the page css tag to target all the answer options in a MaxDiff exercise. The rule colors the 'most' cells green and the 'least' cells red.

Referencing other CSS files

Instead of using local.css, you can reference CSS files hosted in your survey's Files applet using the @import statement. In the code below, every page within the 'inside' start group will use the alt.css file.

start group: inside
page css: @import url("/s/[* appid() *]/alt.css");

...survey content here

end group: inside

Related to

Related articles

Comments

0 comments

Please sign in to leave a comment.