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.

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.

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

1. Select Stylesheet file.
2. Give the file a name and add your CSS.

Stylesheet Editor

1. 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:

Linking CSS in template

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

or

<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

1. Select JavaScript file.
2. Give the file a name and add your JavaScript code.

Sample JavaScript

1. 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:

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

Reference the script in template

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

Styles defined in your CSS must still exist for the frontend, but they will not automatically appear in the Rich Text Editor.

If content appears differently in the backoffice editor than on the frontend, it may be caused by additional stylesheets applied in your site.