> For the complete documentation index, see [llms.txt](https://docs.umbraco.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.umbraco.com/umbraco-cms/17.latest/develop-with-umbraco/templating-and-rendering/design/stylesheets-javascript.md).
# Stylesheets and JavaScript
Information on working with stylesheets and JavaScript in Umbraco.
Stylesheets and JavaScript files control the appearance and behavior of your website. In Umbraco, these files live in the `wwwroot` folder of your project. You can also manage them from the backoffice.
This article explains how to work with stylesheets and JavaScript and clarifies how styling works with the Rich Text Editor (RTE) Data Type.
{% hint style="info" %}
The backoffice works well for quick changes to stylesheets and JavaScript during local development. For ongoing work, maintain these files in your project using an IDE, and keep them in source control. For more information, see [Managing Views and Assets](/umbraco-cms/17.latest/develop-with-umbraco/templating-and-rendering/managing-views-and-assets.md).
{% endhint %}
## Stylesheets in the Backoffice
Stylesheets are used to define how your website content is displayed. You can create and manage CSS files from the **Settings** section.
### Creating a stylesheet
To create a stylesheet:
1. Go to **Settings** section in the backoffice.
2. Expand the **Stylesheets** folder.
3. Click the **⋯** (options) menu.
4. Select **Create**.
5. Select **Stylesheet file**.
6. Give the file a name and add your CSS.
7. Click **Save**.
The stylesheet is saved in the `wwwroot/css` folder of your project by default.
### Using stylesheets
Stylesheets created in the backoffice are standard CSS files. To use them on your website, reference them in your templates or layout files:
```html
```
or
```html
```
## JavaScript files in the Backoffice
JavaScript files can also be created and managed from the backoffice.
### Creating a JavaScript file
To create JavaScript files:
1. Go to **Settings** section in the backoffice.
2. Expand the **Scripts** folder.
3. Click the **⋯** (options) menu.
4. Select **Create**.
5. Select **JavaScript file**.
6. Give the file a name and add your JavaScript code.
7. Click **Save**.
The JavaScript is saved in the `wwwroot/scripts` folder of your project by default.
### Using JavaScript files
Navigate to the template where you would like to reference your scripts:
```html
```
## Rich Text Editor styling
Editor styles are configured using the Style Menu in RTE. To provide editors with predefined styles such as classes, tags, or IDs, you must configure them as part of the Style Menu configuration. For more information, see the [Rich Text Editor](https://docs.umbraco.com/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/style-menu#creating-a-custom-style-select-menu) article.
{% hint style="info" %}
Styles defined in your CSS must still exist for the frontend, but they will not automatically appear in the Rich Text Editor.
{% endhint %}
If content appears differently in the backoffice editor than on the frontend, it may be caused by additional stylesheets applied in your site.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.umbraco.com/umbraco-cms/17.latest/develop-with-umbraco/templating-and-rendering/design/stylesheets-javascript.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.