---
title: Creating CSS stylesheets
related:
  - https://docs.kentico.com/k8/custom-development/miscellaneous-custom-development-tasks/registering-css-preprocessors.md
  - https://docs.kentico.com/k8/configuring-kentico/optimizing-website-performance/using-code-minification-and-compression.md
  - https://docs.kentico.com/k8/developing-websites/validating-website-code-and-accessibility/validating-css.md
  - https://docs.kentico.com/k8/developing-websites/preparing-your-environment-for-team-development/working-with-object-locking.md
  - https://docs.kentico.com/k8/developing-websites/preparing-your-environment-for-team-development/editing-code-externally-and-using-source-control-systems.md
  - https://docs.kentico.com/k8/configuring-kentico/configuring-the-code-editor.md
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

To access the main interface for managing [CSS stylesheets](https://docs.kentico.com/k8/developing-websites/designing-websites-using-css.md), open the **CSS stylesheets** application.

When editing () stylesheets, define the content using [standard CSS code](http://www.w3schools.com/css/css_syntax.asp) (selectors and style declarations). If you have [registered a CSS preprocessor](https://docs.kentico.com/k8/custom-development/miscellaneous-custom-development-tasks/registering-css-preprocessors.md) in the system, you can select a **Language** for the stylesheet, and use the corresponding syntax in the code.

You can [directly preview ](https://docs.kentico.com/k8/developing-websites/previewing-design-changes.md)how a stylesheet affects the appearance of your website. Click **Preview** in the tab's header. The editor opens a side-by-side view that shows both the CSS code and a selected page.

> **Info:** On the actual live site, changes made to CSS stylesheets only take effect after you clear your browser cache and/or restart the application (**System -> Restart application**).

![Editing a CSS stylesheet](https://docs.kentico.com/docsassets/k8/creating-css-stylesheets/CSS_Edit.png "Editing a CSS stylesheet")

The **Theme** tab allows you to manage files used by the edited stylesheet, such as external CSS files, images or skins. You can find more information about associated files in [Creating skins using ASP.NET themes](https://docs.kentico.com/k8/developing-websites/designing-websites-using-css/creating-skins-using-asp-net-themes.md).

On the **Sites** tab, choose for which sites the stylesheet is available.

## Assigning stylesheets to sites and pages

Each website in the system has a default CSS stylesheet. To assign a stylesheet to a site:

1. Open the **Sites** application.
2. Edit () the site.
3. Select an option in the **Site CSS stylesheet** field. You can only choose stylesheets that are allowed for the given site (on the **Sites** tab of the stylesheet editing interface).
4. Click **Save**.

Individual pages either use the website's stylesheet, or you can assign a different stylesheet. By default, pages automatically inherit the stylesheet from their parent document in the content tree, so you can quickly set the stylesheet for entire website sections.

1. Open the **Pages** application.
2. Select the page in the content tree.
3. Open the **Properties -> General** tab.
4. Select the **CSS stylesheet**.
   - Uncheck the **Inherit** box to use a different stylesheet than the parent document.
   - You can only choose stylesheets that are allowed for the given site (on the **Sites** tab of the stylesheet editing interface).
5. Click **Save**.

When displaying pages, the system automatically adds a request that loads the assigned stylesheet into the HTML code.

> **Tip:** **Tip**: When assigning stylesheets to sites or pages, you can directly create new stylesheets (click **New**) or edit the code of the selected stylesheet (click **Edit**).

> **Info:** **Stylesheet URLs**
>
> You can access stylesheets using a URL in the following format:
>
> _\~/CMSPages/GetCSS.aspx?stylesheetname=_
>
> The **GetCSS.aspx** system page retrieves unmodified, user‑friendly stylesheet code even if [minification of stylesheet resources](https://docs.kentico.com/k8/configuring-kentico/optimizing-website-performance/using-code-minification-and-compression.md) is enabled.

## Using CSS blocks for easier navigation in CSS code

You can use comments in format _/\* #BLOCKNAME# \*/_ to improve navigation in the code of large CSS stylesheets. You can access blocks within the stylesheet code through the bookmark list next to the editor. 

To create a hierarchy of sub-blocks, separate the names of individual block levels using forward slashes, for example: _/\* #BLOCKNAME/SUBBLOCK# \*/_

```css title="Example"

/* #Menu# */

...

/* #Menu/TreeMenu# */

...

/* #Menu/MainMenu# */

...

```

![Navigating to blocks in a CSS stylesheet](https://docs.kentico.com/docsassets/k8/creating-css-stylesheets/CSS_blocks.png "Navigating to blocks in a CSS stylesheet")