---
title: Updating styling for live site components
---

> 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 8 changes how certain web parts and other components use CSS classes. This chapter provides information that can help you update the styles of the components on your website after performing the [upgrade](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8.md).

> **Info:** **References**
>
> To learn how to fix or update the styling of specific components after upgrading to Kentico 8, see the following references:

## Kentico 8 styling overview

Kentico 8 projects contain the **Skin.css** stylesheet by default, which provides basic styling for web parts and other components. Use [custom stylesheets](#creating-custom-styles-for-sites) for your site to fine tune the appearance outlined by Skin.css.

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, our 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.

> **Info:** **Note**: The Skin.css stylesheet is included by default on all Kentico sample sites except for _Blank Site_ and _Blank Site ASPX_.

All styles in _Skin.css_ use the `.ContentBody` class to have more specific selectors over certain elements.The file covers the following areas:

- Pagination
- Forms and filters
- Shopping cart
- Animations
- Drop-down menu
- Breadcrumbs
- Alerts
- Calendar
- Tabs
- UI Dialogs
- Tables
- Media library
- Image editor
- Document library
- Categories
- Context menu
- Form controls (Slider, Spinner, Date time form control with calendar)
- Button groups / Vertical separated buttons

## Creating custom 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 styling for your website:

- Do not include _Skin.css_ on your site, define all required styles in standard [CSS stylesheets](https://docs.kentico.com/k8/developing-websites/designing-websites-using-css.md) in Kentico (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 articles describing the process at [Using the LESS CSS Preprocessor for Smarter Style Sheets](http://coding.smashingmagazine.com/2010/12/06/using-the-less-css-preprocessor-for-smarter-style-sheets/).