CSS Template

A template for CSS for the selected element

Web Export creates the CSS needed to match what is seen in Adobe XD. You can modify it using the styles field and by making changes in the Element Options form. You can also add additional CSS in the CSS template.

When editing the CSS template for an artboard it is different. Use the stylesheet template.

CSS Template - element template Stylesheet template - artboard template

CSS Template
CSS Template Icon

By default the template is empty.

You can add more CSS here and it will be added directly after element style declaration.

CSS Style Template
Exported CSS

You can use tokens to get the name of the selected element.

Currently there are two tokens:

  • SELECTOR - the primary class name or id of the selected element

  • SELECTOR2 - the secondary class name or id of the selected element (if any)

For example, when you enter the following CSS in the CSS template:

This is what is exported:

You can use the no styles token to prevent the default styles from being exported.

Style template with no styles token
Exported CSS excluding all default styles

If you have the Artboard selected the tokens and the rules are slightly different. View the Stylesheet Template for more information.