Studio Editor: About CSS Editing

Add your own CSS code to style elements and their individual parts. CSS expands your toolbox while building sites for clients, as you can apply design options and behavior changes that aren't available in the Editor.

Adding CSS to elements opens a whole new range of styling possibilities. It allows you to change the design of an element to your liking, which is especially useful for options that aren't yet available in the Editor.

CSS also gives you the freedom to animate elements as you like. Create your own animations with the properties of your choice, and apply multiple animations to an element if needed.

Another important use of CSS is maximizing responsiveness. For example, use media queries (based on viewport size or device capabilities) to ensure an element looks ideal on all screens.

In the Studio Editor, elements are divided into semantic classes so you can customize the individual part you need. For example, buttons have 3 CSS classes:

Once you pick a class from the list, it gets automatically added to the code so you can start working.

You can also add your own CSS classes to the global.css page. This lets you apply styling and formatting to the elements that you designate with your custom class, rather than all instances of one specific element. Learn all about custom classes

The Code panel in the Editor includes a global CSS page for all your edits. The code on this page applies globally, to any element with the relevant class, on all site pages.

The CSS code you add to this page overrides selections you make in a Studio Editor panel. For example, if you use CSS to change the background of all buttons, it overrides the background you set in the Inspector panel.