---
title: Designing websites using CSS
related:
  - https://docs.kentico.com/k10/configuring-kentico/optimizing-website-performance/using-code-minification-and-compression.md
  - https://docs.kentico.com/k10/developing-websites/validating-website-code-and-accessibility/validating-css.md
  - https://docs.kentico.com/k10/custom-development/miscellaneous-custom-development-tasks/registering-css-preprocessors.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).

Kentico websites use standard [CSS](http://en.wikipedia.org/wiki/Cascading_Style_Sheets) to define the appearance and design of pages and their components. The system organizes CSS code into stylesheets.

There are two ways in which we recommend that you style your website:

- [Styling websites using the CSS stylesheets application](#styling-websites-using-the-css-stylesheets-application)
- [Using automation tools to write your CSS](#using-automation-tools-to-style-websites)

Also on this page:

## Styling websites using the CSS stylesheets application

If you don't need any automation tools, like preprocessors and bundling tools, we recommend using the CSS stylesheets application to style your website. Styles managed in the CSS application are stored in the database instead of the file system.

1. Open the **CSS Stylesheets** application.
2. Create a **New CSS stylesheet**. We recommend the following naming convention, where _YourSite_ is the _Code name_ of your site:
   - Display name: _YourSite - Style_

     ![Creating a stylesheet](https://docs.kentico.com/docsassets/k10/designing-websites-using-css/creating_stylesheet.png "Creating a stylesheet")
3. **Save**.
4. Open the **Sites** application.
5. **Edit** the site in which you want to include the stylesheet.
6. Select the stylesheet you just created in **Site CSS stylesheet**.

   ![Assigning a stylesheet to a site](https://docs.kentico.com/docsassets/k10/designing-websites-using-css/selecting_site_stylesheet.png "Assigning a stylesheet to a site")
7. **Save**.

This is now the site's main CSS stylesheet. You may consider separating your CSS into multiple stylesheets for simpler management. For example, you may want to use a _SiteName - Navigation_ stylesheet for your website's navigation and _SiteName - Landing page_ stylesheet for a specific landing page on your site. You would then [combine all the specific stylesheets](https://docs.kentico.com/k10/developing-websites/designing-websites-using-css/combining-stylesheets-from-multiple-sources.md) in the main stylesheet that you just created. This is done using the _{% CSS\["Stylesheet"] #%}_ macro. The main stylesheet can then contain only general styles, like the general styles for the _html_, _body_, and _form_ elements that apply to the whole website.

![Combining multiple stylesheets in one](https://docs.kentico.com/docsassets/k10/designing-websites-using-css/combining_stylesheets.png "Combining multiple stylesheets in one")

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

> **Tip:** **Tips**
>
> - If you wish to use a dynamic stylesheet language, you need to [register a CSS preprocessor in the system](https://docs.kentico.com/k10/custom-development/miscellaneous-custom-development-tasks/registering-css-preprocessors.md).
> - The system provides a [CSS validator](https://docs.kentico.com/k10/developing-websites/validating-website-code-and-accessibility/validating-css.md) that allows you to check if the styles of individual pages are valid against CSS standards.

## Using automation tools to style websites

If you want to make use of preprocessors, code hinting or CSS bundling when creating your CSS, you need to store your CSS files on the file system.

This approach doesn't make use of the CSS stylesheets application.

1. Create a _Stylesheets_ folder in _\CMS\\._ For example _C:\inetpub\wwwroot\Kentico\CMS\CorporateSite\Stylesheets_.
2. Set your automation tools to create CSS files in the folder.
3. Open the **Pages** application.
4. Select the master page and switch to the **Master page** tab.
5. Include the stylesheets in the head section of the page. For example, for a Styles.css file, you would enter the following:

   ![Linking stylesheets stored on the file system in the page](https://docs.kentico.com/docsassets/k10/designing-websites-using-css/adding_stylesheet_to_master_page.png "Linking stylesheets stored on the file system in the page")
6. **Save**.

The stylesheets are now included in all the pages on the site.

## 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 page 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 page.
   - 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/k10/configuring-kentico/optimizing-website-performance/using-code-minification-and-compression.md) is enabled.

## Default styling of Kentico components

Kentico projects contain the **Skin.css** physical stylesheet by default, which provides basic styling for [web parts](https://docs.kentico.com/k10/developing-websites/developing-websites-using-the-portal-engine/using-and-configuring-web-parts.md) and other components on the live site.

A global **Skin.css** file is located in the _\~/App\_Themes/Global_ folder. Individual sites have their own dedicated Skin.css files, which import the global Skin.css stylesheet. For example, the Corporate Site sample site has its Skin.css file in the _\~/App\_Themes/CorporateSite_ folder. If you edit the file, you can see that the stylesheet imports the global Skin.css file, and contains several additional styles for the Corporate Site.

The styles in _Skin.css_ use the **.ContentBody** class to have stronger (more specific) selectors.

> **Info:** **Note**: The _Skin.css_ stylesheet is linked by default on the pages of all Kentico sample sites except the _Blank Site_ and _ASPX Blank Site_.

### Creating custom component styles for sites

The default Skin.css styles may interfere with your site's custom stylesheets.

Use one of the following approaches to implement custom component styling for your website:

- Do not include _Skin.css_ on your site, define all required styles as Kentico [CSS stylesheets](#styling-websites-using-the-css-stylesheets-application) or CSS files on the file system.
- Use the **!important** directive or stronger selectors (with more classes) in your CSS to override the default styles
- Edit the skin stylesheets directly

**Note**: If you edit the _global_ skin stylesheet, the changes affect all sites in your Kentico instance, and may be overwritten when you upgrade the site to a new version of Kentico.

> **Info:** **LESS code base**
>
> Skin.css is generated from the LESS **Skin.less** file. You can modify Skin.css directly, but you lose the advantages of the structured, commented and more readable .less file.
>
> The Skin.less file is located in _\~/App\_Themes/Global_ and includes multiple skin sub-files in the _\~/App\_Themes/Global/Skin_ folder.
>
> If you are uncertain how to work with LESS, you can find an article describing the process at [Using the LESS CSS Preprocessor for Smarter Style Sheets](https://www.smashingmagazine.com/2010/12/using-the-less-css-preprocessor-for-smarter-style-sheets/).

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

...

```

![Creating sections in stylesheets](https://docs.kentico.com/docsassets/k10/designing-websites-using-css/headers_in_stylesheet.png "Creating sections in stylesheets")

## Browser and language‑specific styles

The system automatically assigns CSS classes to the __ element of pages according to the characteristics of the selected language (the text direction and exact culture) and the browser used to display the page. For example:

```html

<body class="LTR Safari Chrome Safari53 Chrome53 ENUS ContentBody" >

```

 Four types of classes are added:

- **Text direction** – the _LTR_ class is assigned for left‑to‑right languages, and _RTL_ for right‑to‑left.
- **Browser type** – added according to the browser in which the page is opened. The following classes are used:

  | Browser           | Class names    |
  | ----------------- | -------------- |
  | Internet Explorer | IE             |
  | Firefox           | Gecko          |
  | Google Chrome     | Chrome, Safari |
  | Microsoft Edge    | Chrome, Safari |
  | Safari            | Safari         |
  | Opera             | Opera          |
- **Browser version** – the class name is the same as for the browser type, but with the number of the browser's major version appended, for example _IE11_, _Chrome53_ etc.
- **Culture** – the name of the class is added based on the culture code of the page's content (without the hyphen), for example _ENUS_ for pages using the _en-US_ culture.

This feature allows you to style page elements differently according to the browsing environment of the current visitor. You can define styles for any combination of the classes mentioned above.

For example, you can add the following into a website's stylesheet:

```css

_:-ms-fullscreen, :root .ie11up .MyFont 
 {
   font-size: 20px;
 }

 .Opera .MyFont 
 {
   font-size: 18px;
 }

```

Now elements styled using the _MyFont_ class have a different font size when viewed in Internet Explorer 11 or Opera (all versions) browsers.