How to write a custom CSS file

With a custom CSS file, you can modify almost every part of your app's user interface. Here is a screenshot of an app that's using a custom CSS file to create a "dark mode" user interface:

‍

What is CSS? 

CSS (cascading style sheets) is a rule-based language for defining web page styles. Your app's background color, text size, button styles are all controlled by CSS.

How do I add a custom CSS file? 

If you have a Business subscription (see pricing), you can upload your own CSS file under Settings > Styles in the app builder:

How does my custom CSS interact with the default app styles? 

Your custom CSS file is used in addition to one of the default styles (Classic, California, or Brooklyn). You must write your custom CSS in such a way that it is given priority over a conflicting default style. Quick lesson on CSS: if there are two or more conflicting CSS rules for a particular element on your website, the most specific rule is given priority.

One of the easiest ways to make your CSS rules more specific than the default is by prepending html, like this:

What can I change with custom CSS? 

CSS allows you to edit the "look and feel" of a web page. It does not, however, allow you to rearrange or add the functional elements of a website. For example: 

• You can change a button's color, shape, size, but you can't change a button's placement on the web page.
• You can change how question fields look, but you can't change their placement or function.

‍