Change styles using the CSS panel

CSS Panel Overview - Google Web Designer

The CSS panel shows the defined style rules for any element that you select, including keyframes rules for animated elements. 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.

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. To delete a property, clear the property name.

To toggle a property:

1. Click the checkbox next to a property name. When the checkbox is unchecked, the browser preview and the published files don't include that property.
2. To reactivate the property, click the checkbox again.

Keyframes rules for animation

The CSS panel displays the keyframes rules (with the @keyframes keyword) for elements animated with CSS.

To create a new keyframes rule for an element:

1. Select an element without animation.
2. Click the Add keyframes rule  button at the bottom of the CSS panel. Google Web Designer adds the starting and ending keyframes (0% and 100%) and sets the animation duration to 1 second by default.
3. To add an animated property to a keyframe, click Add property and enter a CSS property and value.
4. Continue to add new property/value pairs until the rule is fully defined.

To add a keyframe:

1. Select an animated element.
2. In the CSS panel, click Insert keyframe between existing keyframes.
3. Web Designer automatically sets the keyframe to occur halfway between the surrounding keyframes. Click the percentage to change the keyframe timing.
4. Animated properties are interpolated from the surrounding keyframes. Add, edit, or delete properties for the new keyframe.

You can't add a keyframe past the end of existing animation. Use the timeline instead.