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