CSS Template

A template for CSS for the selected element

Web Export creates the CSS needed to make the element match what is seen in Adobe XD.

You can add your own CSS by using the styles field in the Element Options form.

You can also add additional CSS, CSS selectors in the CSS template field. You can also replace existing exported CSS using a special token in the CSS template field.

When you have an Artboard selected the CSS template tokens are different than for an element.

See Artboard Stylesheet Template.

For adding or changing a few styles use the styles field.

To add additional CSS or CSS Selectors select the Element. open the Element Properties panel and click on the CSS template icon:

CSS Template

CSS Template Icon

By default the template is empty.

For an element you can add more CSS here and it will be added directly after element page style declaration.

CSS Style Template

Exported CSS

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

Two important tokens are SELECTOR and SELECTOR2.

• 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.

If you have the Artboard selected the tokens and the rules are slightly different.

If you find you want to exclude all default CSS styling and style everything yourself you can use the Artboard Markup Only option.

Note that this option will leave the layout up to you.

Element token list

Token Text

{SELECTOR} {
    --selector: {SELECTOR};
    --selector2: {SELECTOR2};
    --pixel-width: {PIXEL_WIDTH};
    --pixel-height: {PIXEL_HEIGHT};
    --percent-width: {PERCENT_WIDTH};
    --percent-height: {PERCENT_HEIGHT};
    --width: {WIDTH};
    --height: {HEIGHT};
    --top: {TOP};
    --left: {LEFT};
    --right: {RIGHT};
    --bottom: {BOTTOM};
    --rotation: {ROTATION};
    --transform: {TRANSFORM};
    --fillColor: {FILL_COLOR};
    --stroke: {STROKE};
    --strokeColor: {STROKE_COLOR};
    --strokeWidth: {STROKE_WIDTH};
    --strokeStyle: {STROKE_STYLE};
}

An example project showing template can be found here.

View the Artboard Stylesheet Template for more information.