Change styles using the CSS panel

The CSS panel shows the defined style rules for any element that you select. You can also edit the styles for the element's classes, add inline styling, and create new style rules using the CSS panel's Styles tab.
To see a list of CSS properties for an element, switch to the Computed tab.
You cannot view or edit inline styles with the CSS panel while authoring AMPHTML ads.

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 generates a unique class selector, which you can edit. If you enter a class selector, Web Designer adds 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:

  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 displays the style rules associated with the element.
  2. Click a property or value to edit it.


Was this helpful?
How can we improve it?