> For the complete documentation index, see [llms.txt](https://velara-3.gitbook.io/web-export/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://velara-3.gitbook.io/web-export/element-options/css-template.md).

# 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](/web-export/element-options/untitled.md) 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. 

{% hint style="info" %}
When you have an **Artboard** selected the CSS template tokens are different than for an element. 

See [Artboard Stylesheet Template](/web-export/export-artboard-dialog/stylesheet-template.md). 
{% endhint %}

For adding or changing a few styles use the [styles](/web-export/element-options/untitled.md) 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](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-MFaVQ_9uA02rxXeA2gU%2F-MFaWAjuUU38tZHERYJf%2Fimage.png?alt=media\&token=9a01a5a5-2605-45ff-ba22-1bd10b2f0ad4)

![CSS Template Icon](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-MFaVQ_9uA02rxXeA2gU%2F-MFaWHQl12Cgh7vyLUdW%2Fimage.png?alt=media\&token=c5142755-dacf-4f02-b027-9eb6dd347a73)

By default the template is empty. 

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-MFaVQ_9uA02rxXeA2gU%2F-MFaWX3wruz45Nas2vJI%2Fimage.png?alt=media\&token=41572bf0-142e-4a35-bde8-ced429568d31)

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

![CSS Style Template](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-MFaVQ_9uA02rxXeA2gU%2F-MFaWozmcPRgU8UyI2sE%2Fimage.png?alt=media\&token=8e57ed3d-5189-403f-889d-b96a88152472)

![Exported CSS](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-MFaVQ_9uA02rxXeA2gU%2F-MFaWw9tKoAEwX9mdc7i%2Fimage.png?alt=media\&token=da66807a-8895-4e21-8bfd-b19d27ebf554)

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: 

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-Mbty4ZSNRAtz8e6Yoq6%2F-Mbu0KIqRB-1xMbxIrrc%2Fimage.png?alt=media\&token=56e5bb07-cd49-40b0-9056-e1fcb95c5597)

This is what is exported: 

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-Mbty4ZSNRAtz8e6Yoq6%2F-Mbu16NrbzQE0SClbnFW%2Fimage.png?alt=media\&token=dae49a45-c74b-4062-9ec9-0b4f2f0c9e07)

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

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-Mbty4ZSNRAtz8e6Yoq6%2F-Mbu4gMvh2Fa3-sFpIGN%2Fimage.png?alt=media\&token=865e4db4-faf4-444e-8c88-3b45e003861e)

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-Mbty4ZSNRAtz8e6Yoq6%2F-Mbu1S09vSA6DeavLLu8%2Fimage.png?alt=media\&token=18a9cebe-5104-4e1d-8410-dba8d407b1ce)

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

{% hint style="info" %}
If you find you want to exclude all default CSS styling and style everything yourself you can use the Artboard [Markup Only](/web-export/export-artboard-dialog/markup-only.md) option. 

Note that this option will leave the layout up to you. 
{% endhint %}

Element token list

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-Mbty4ZSNRAtz8e6Yoq6%2F-Mbu5MfSzFM7sLzU9TLF%2Fimage.png?alt=media\&token=571a60b2-0d81-4f0f-9727-56f08d219d18)

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](https://github.com/velara3/xd-examples/tree/master/web-export/examples/templates). 

View the [Artboard Stylesheet Template](/web-export/export-artboard-dialog/stylesheet-template.md) for more information.