Studio Editor: About CSS Editing

3 min read
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.
Check out our Wix Studio Academy webinar on enhancing your design with CSS. For more information about styling with CSS, see the MDN CSS reference docs.

Get more control of your design

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.
Check our supported elements list to make sure you can customize an element with CSS.

Change particular parts of elements

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:
  • .button: The entire button element.
  • .button__label: The text on the button.
  • .button__icon: The icon on the button.
Once you pick a class from the list, it gets automatically added to the code so you can start working.
Which classes are available?
See the full list of elements and their classes.
A screenshot showing a button selected on the canvas and the available classes, as described in the article

Create custom CSS classes

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

One global page for all CSS edits

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
The CSS page in the Code panel

How to get started

  1. Access the CSS section in the Code panel:
    1. Click the Code icon  on the left side of the Editor.
    2. (If this is your first time on this site) Click Start Coding.
    3. Click CSS.
  2. Start styling an element:
    1. Select the relevant element on the canvas.
      Note: Make sure the CSS panel is still open on the left.
    2. (In the CSS panel) Select the class you want:
      • Our classes: Select the relevant one under Global classes.
      • Your own class: Type it under Custom classes.
    3. Add your CSS code.
An example of the CSS page, showing the available classes after selecting a horizontal menu on the canvas.

Did this help?