# Stylesheets And JavaScript

In Umbraco, you can manage stylesheets and JavaScript files directly from the backoffice. These files are used to control the appearance and behavior of your website.

This article explains how to work with stylesheets and JavaScript and clarifies how styling works with the Rich Text Editor (RTE) Data Type.

## 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**.

![Creating a new stylesheet](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-7dc66b621a4a8b422735beeb5f138fa8dcad1e7a%2Fcreating-stylesheet.png?alt=media)

5. Select **Stylesheet file**.
6. Give the file a name and add your CSS.

![Stylesheet Editor](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-5ef36e3457aa710aff1b8894cce1fcb15247293f%2Fstylesheet-editor.png?alt=media)

7. Click **Save**.

The stylesheet is saved in the `wwwroot/css` folder of your project.

### 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:

![Linking CSS in template](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-f2fbedbfe171e1938503f6c04943b608b0c1540b%2Flinking-stylesheet.png?alt=media)

```html
<link rel="stylesheet" href="@Url.Content("~/css/umbraco-starterkit-style.css")"/>
```

or

```html
<link rel="stylesheet" href="/css/mystylesheet.css" />
```

## 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**.

![Creating a new JavaScript](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-01e9e9ccbfeb8e00101b55cd2fa0d2613b13a66c%2Fcreating-scripts.png?alt=media)

5. Select **JavaScript file**.
6. Give the file a name and add your JavaScript code.

![Sample Javascript](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-05e545fe84e7f302ec22b333222c4b6f3f346d3e%2Fsample-Javacsript.png?alt=media)

7. Click **Save**.

The JavaScript is saved in the `wwwroot/scripts` folder of your project.

### Using JavaScript files

Navigate to the template where you would like to reference your scripts:

```html
<script src="/scripts/myScript.js"></script>
```

![Reference the script in template](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-45f213d66c0fc51615496adb72b94b47e6ace72d%2Fscript-reference.png?alt=media)

{% hint style="info" %}
If you are working locally, you can create CSS and JS files outside of the Backoffice. Place files in the `css` or `scripts` folders. In the Backoffice, click **...** next to the **Stylesheets** or **Scripts** folder and select **Reload children**.
{% endhint %}

## 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: 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://docs.umbraco.com/umbraco-cms/fundamentals/design/stylesheets-javascript.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.