Custom CSS

CSS (Cascading Style Sheets) is a computer language used to adjust the presentation of a HTML or XML document. Adding Custom CSS allows you to change many elements of your design (e.g., make answers larger, make buttons out of links, etc.) that are not included in the Design tab. 


Essential 
Professional 
Enterprise ✓
ReportR ✓

NOTE 

Advantages of using custom CSS

  • It helps brand recall as it allows  you to recreate your company's branding entirely to make the survey match and will therefore enable customers to immediately link the survey with your company.
  • Greater flexibility to tweak the design – check out the examples below to see how many things you can change using CSS. If there are a few things bothering you about the way the survey appears, CSS enables you to tailor the survey design in all details.

This guide will teach you:

  1. Add custom CSS file
  2. Notes about CSS
  3. Examples of CSS

1. Add custom CSS file

Make a CSS or Text-file with the changes you want, and upload it by clicking Add custom CSS file which you'll find in the Design tab of your questionnaire.

Custom CSS button

2. Notes about CSS

Here are some notes to remember when writing a CSS file:

  • Always start with the right element, and always open and close your CSS with brackets.

body {...}
  • Always put a semicolon (;) after a CSS code.

  • You can find the right elements (HTML) by opening a web inspector in your web browser.

  • You can give an element different CSS codes, i.e., editing font, color, and style of a text. 
        p { font-family: ‘arial’;  
    color: ‘blue’;
    font-style: ‘italic’;
        }
  • Font size often use ‘em’ while other CSS mostly use pixels (px) or percent (%)

font-size: 0.8em; 
width: 60px; or 15%;
  • In HTML, when an element is named with a class, you start your CSS element with a point.

.input {...}

  • In HTML, when an element is named with an ID, you start your CSS element with a hashtag.

#content2 {...}

3. Examples of CSS

Here are examples to illustrate how CSS changes the format of different elements. Use this list to jump to the example that you're looking for:

Make answer text larger

Custom CSS to make text larger

Make button text larger

Custom CSS to make button larger

Resize Images

Custom CSS to resize images

Resize videos

Custom CSS to resize videos

Custom CSS to resize logo

Resize outcome image

Custom CSS to resize outcome image

Define font sizes

Custom CSS to define font size

Define font

Custom CSS to define font

Remove line between questions on the same slide

Custom CSS to remove line

Adjust space under the question

Custom CSS to adjust the space

Edit font, text color, background color/image

Custom CSS to edit font, color, background, image

Color the border around answers

Custom CSS to color the border around images

Change text color and background of the selected answer

Custom CSS to change the text color of selected answer

Change the color of the slider

Custom CSS change slider color

Change the color of the star/smiley rating

Custom CSS to change the color of rating

Change the color of the border around the quiz score hand indicator

Custom CSS to change the color of hand indicator

Survey Anyplace is not only available for desktop or laptop, it’s also available on many other platforms and devices! Because of this, layouts with custom CSS can differ on other screens.


To make the survey adjustable to multiple screens, it is advised to use @media-query.

What's next?

  • Add a Custom Button with HTML: Create a Custom Button with HTML and add it into an outcome or the final page of your questionnaire, in order to embed a hidden hyperlink and redirect your respondents to the webpage of your choice.
  • PDF design settings using CSS: CSS allows you to change other elements of your design (e.g., make answers larger, make buttons out of links, etc.) that are not included in the Design tab. You can make use of the HTML view to preview your changes. 
  • The text editor allows you to make your text more interesting by changing the font, color, size, adding emoticons and variables to personalize questions. It also allows you adjust your content with HTML. What you adjust in the survey tool is what you will see in the survey itself.
S
Support is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.