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:

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.

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};
}