---
title: Designing websites using CSS
related:
  - https://docs.kentico.com/k82/configuring-kentico/optimizing-website-performance/using-code-minification-and-compression.md
  - https://docs.kentico.com/k82/developing-websites/validating-website-code-and-accessibility/validating-css.md
  - https://docs.kentico.com/k82/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 styles](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.

Every site has a CSS stylesheet that pages use by default. However, you can assign a different stylesheet to each page. When displaying pages, the system automatically adds a request that loads the assigned stylesheet into the HTML code. See [Creating CSS stylesheets](https://docs.kentico.com/k82/developing-websites/designing-websites-using-css/creating-css-stylesheets.md) to learn more.

You can also define CSS styles for various types of page components. For further information, see [Adding CSS stylesheets to page components](https://docs.kentico.com/k82/developing-websites/designing-websites-using-css/adding-css-stylesheets-to-page-components.md).

> **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/k82/custom-development/miscellaneous-custom-development-tasks/registering-css-preprocessors.md).
> - You can download a [LESS Preprocessor](http://devnet.kentico.com/marketplace/integration/less-preprocessor) from the Kentico Marketplace.
> - The system provides a [CSS validator](https://docs.kentico.com/k82/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.

## Default styling of components

Kentico projects contain the **Skin.css** physical stylesheet by default, which provides basic styling for [web parts](https://docs.kentico.com/k82/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 for _Blank Site_ and _Blank Site ASPX_.

### 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 in standard Kentico [CSS stylesheets](https://docs.kentico.com/k82/developing-websites/designing-websites-using-css/creating-css-stylesheets.md) (you can copy useful rules from Skin.css)
- 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/).

## Browser and language‑specific styles

The system automatically assigns CSS classes to the _\<body>_ 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 IE IE9 ENUS">

```

 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 |
  | 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 _IE9_, _Gecko26_ 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

.IE9 .MyFont 
 {
   font-size: 20px;
 }

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

```

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