CSS in Qualtrics

Experts Area: The following page assumes you are familiar with HTML and CSS fundamentals such as selectors and specificity.

Need to tread ahead without that background? Let us suggest first taking the time to learn some HTML and CSS basics –

  1. HTML and CSS Basics: Learn the basics of HTML and CSS through a series of simple guided tutorials, free at codecademy.com.
  2. DOM Manipulation: Learn how to identify and change the style of any webpage, whether that be a page you coded yourself, or a Qualtrics survey. Free over at google.

Introduction

Virtually any style in a Qualtrics survey can be modified using CSS code. This tutorial will review how to insert CSS code into a survey, provide some tips on specificity, and give you a cheat sheet showing some of the more common classes and IDs that can be modified in a survey.

Inserting CSS Code Into a Survey

CSS code can be inserted either directly into the survey Look and Feel, or into an individual question. CSS inserted into the Look and Feel will apply to your entire survey, while CSS inserted into a question will apply to just that page of the survey.

Inserting CSS Into the Survey Look and Feel

  1. Navigate to the Look and Feel section of the Edit Survey tab.Look and Feel
  2. Click the Advanced tab.Advanced Tab
  3. To load an external CSS file you have saved on your own web server, insert the URL. To type in your own CSS, click Add Custom CSS.add custom css
  4. In the CSS Editor, paste in your CSS and then click Save.css example

Inserting CSS Into a Survey Question

  1. Click on the text of any question on the survey page you would like to manipulate.

    CSS Click Question Text
  2. Toggle from Normal View to HTML View.

    CSS Question Text HTML View
  3. Anywhere in the question HTML, paste in your CSS code, surrounded by <style> and </style>.

    Question CSS Paste Style

Commonly Used Selectors

Every survey includes a set of styles defined by its Survey Theme. These styles can be overriden using CSS you provide.

Because every Survey Theme is different, the specific selectors needed to make style changes may vary from survey to survey. For this reason, we recommend using a web inspector such as Chrome Developer Tools for identifying the appropriate selectors to change on your survey.

Some selectors stay the same from one Survey Theme to another. Click on the screenshot below to view the selectors for common survey elements:

Survey CSS

A Note On Specificity

When styling a survey, you may find your styles being ignored in favor of the default Survey Theme styles.

If your styles are being overridden by the Survey Theme, an easy fix is to raise the specificity of your styles with !important.

Before:

body{ 
     background-color: blue;
     overflow: hidden;
}

After:

body{ 
     background-color: blue !important;
     overflow: hidden !important;
}

!important raises the specificity of your styles so they will override competing styles in the Survey Theme. Need to brush up on specificity? An in-depth tutorial on the subject can be found here.

Qtip: Haven’t seen !important before? This tag is discouraged in general web development since it overrides all rules of specificity. It is usually reserved for cases like this where you are adding CSS on top of an existing web page.

Saving Your Styles

Beyond Copying and Pasting from one survey to another, there are two options for saving your styles for future use.

Hosting a Stylesheet

If you have a set of styles you will be using over and over, consider saving them into a stylesheet hosted on your web server.

External stylesheets may be referenced from any survey by pasting the stylesheet URL into the External CSS box, found in the Advanced section of Look and Feel.

External CSS

Having a New Survey Theme Created

Depending on your Qualtrics license, you may qualify to have custom Survey Themes added to your organization’s permanent Theme library. Check with your account representative to see if this is available for your license.

Google+