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 ✓

What are the advantages of using custom CSS?

  • It helps brand recall – CSS helps you recreate your company's branding entirely to make the survey match and will therefore enable customers to immediately identify 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.


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.


Custom CSS button


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 {...}



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

Resize logo

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.

V
Vincent 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.