Change styles using the CSS panel

The CSS panel shows the styling for any element that you select. You can also edit the styling for the class, add inline styling, and create new styles using the CSS panel.

To create a new style rule in your document:

  1. Select an element that you want to apply the new style rule to.
  2. Click the Add rule button  at the bottom of the CSS panel.
  3. Google Web Designer will automatically generate a unique class selector. You can enter a different selector as long as it's unique and applies to the selected element. If you provide a new class name, Web Designer will automatically add that class to the selected element.
  4. Between the brackets for the new rule's declaration, click Add property and enter a CSS property and value, e.g., width: 209px;.
  5. Continue to add new property/value pairs until the rule is fully defined.

To add an inline style to an element in your document:

  1. Select an element.
  2. In the CSS panel, click Add property button in the inline style block.
  3. Add property/value pairs to change the element's style.

To modify a style:

  1. Select an element in your document. The CSS panel will display the style rules associated with the element.
  2. Click a property or value to edit it.
Was this article helpful?
How can we improve it?