---
title: Creating a CSS stylesheet
---

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

Before you start editing your new website, prepare a new CSS stylesheet based on the styles and images of the sample website template.

1. Open the **CSS stylesheets** application.

2. Click **New CSS stylesheet**.

3. Enter the following values:

   - **Display name**: My site stylesheet
   - **Code name**: MySite
   - **Code**: copy and paste all CSS code from the sample web template - **SampleWebTemplate\Styles\main.css**

   ![Creating the site's stylesheet](https://docs.kentico.com/docsassets/k82tutorial/creating-a-css-stylesheet/CSS_New.png "Creating the site's stylesheet")

4. Click **Save**.

5. Switch to the **Sites** tab and make sure the stylesheet is assigned to **My website**.

6. Open the **Sites** application and edit () **My website**.

7. Select _**My site stylesheet**_ as the **Site CSS stylesheet** (in the _Style sheets_ field category on the _General_ tab).

   ![Assigning the new stylesheet to the site](https://docs.kentico.com/docsassets/k82tutorial/creating-a-css-stylesheet/CSS_Assign_To_Site.png "Assigning the new stylesheet to the site")

8. Click **Save**. This ensures that all pages of your new website load the appropriate stylesheet.

9. Copy the _**SampleWebTemplate\app\_themes\MySite**_ folder to the **CMS\App\_Themes** folder in your web project (_c:\inetpub\wwwroot\Kentico_ by default).

The folder contains graphics for the website template. The App\_Themes location ensures that the images are exported as part of the website if you decide to move the website in the future. The folder under App\_Themes must have the same name as the code name of the CSS stylesheet: **MySite**.

> **Info:** **CSS stylesheet URL and relative paths**
>
> The image paths in the sample CSS stylesheet already match the target folders in your new website. In real-world scenarios, you will need to adjust the paths manually. **The URLs of images in the CSS stylesheets are always relative to the location of the web project.**
>
> The URL of the CSS stylesheet is:
>
> _/CMSPages/GetResource.ashx?stylesheetname=MySite_
>
> which means that you need to link to files in the App\_Themes folder like in the example below:
>
> _/app\_themes/mysite/images/imagename.gif_