# CSS Template

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](https://velara-3.gitbook.io/web-export/element-options/untitled) 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](https://velara-3.gitbook.io/web-export/export-artboard-dialog/stylesheet-template). 
{% endhint %}

For adding or changing a few styles use the [styles](https://velara-3.gitbook.io/web-export/element-options/untitled) 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](https://velara-3.gitbook.io/web-export/export-artboard-dialog/markup-only) 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](https://velara-3.gitbook.io/web-export/export-artboard-dialog/stylesheet-template) for more information. 


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://velara-3.gitbook.io/web-export/element-options/css-template.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.