# Artboard Stylesheet template

The Stylesheet template value is one place you can use to define additional styles for your artboard. 

The template is empty by default but if you add your own styles be sure to include the `styles_content` token before or after your content to make sure the page contents are included. 

![Example stylesheet content](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-Lov1r-SVNrGpUoNswsu%2F-LovQchwcIwOWqofcCM8%2Fimage.png?alt=media\&token=c79729e1-8a4d-4452-a8cf-81db1e946dc1)

There is a special token called `styles_content` that is used to place the write the page styles. 

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-Mbty4ZSNRAtz8e6Yoq6%2F-MbuBnbp147oLJ0lZnNS%2Fimage.png?alt=media\&token=32ec80b4-9ab9-4006-bed3-1a1d58edbbfa)

If you exclude this token your CSS will be written but the page CSS will not be written.  

You can also add styles to the page using [Code Blocks](https://velara-3.gitbook.io/web-export/creating-code-blocks) or in an elements [CSS Template](https://velara-3.gitbook.io/web-export/element-options/css-template). 

There is a token of the same name defined in the [page template](https://velara-3.gitbook.io/web-export/export-artboard-dialog/page-template) that defines where the styles or the link to an external stylesheet are placed. 

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-Mbty4ZSNRAtz8e6Yoq6%2F-MbuC2qQWmYZtmFNiz0s%2Fimage.png?alt=media\&token=59618a62-6d73-483d-8fd9-c3dfb60d40e6)

You can view the exported CSS by clicking on the [Show CSS](https://velara-3.gitbook.io/web-export/element-options/show-css) button. 

For adding CSS to elements see the [CSS Template](https://velara-3.gitbook.io/web-export/element-options/css-template) field. 

You can move the page CSS to an external file using the External Stylesheet option. 

#### Example Project

{% embed url="<https://github.com/velara3/xd-examples/tree/master/web-export/examples/external-stylesheets>" %}
External Stylesheet
{% endembed %}

You can learn more about CSS styles by reading more in the references below.&#x20;

{% hint style="warning" %}
If you choose to use an external stylesheet and view your page in a browser from the file system the styles may not load.&#x20;

See setting up [local server](https://velara-3.gitbook.io/web-export/setting-up-a-server).
{% endhint %}

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/CSS>" %}

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/CSS/Reference>" %}