---
title: Adding styles to the website
---

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

> **Info:** This page is a part of a tutorial, which you should follow sequentially, from the beginning to the end. [Go to the first page: Getting started with Kentico](https://docs.kentico.com/k10tutorial/getting-started-with-kentico.md).

When you have a website created, it is a good practice to first define its appearance and design. This is achieved by using CSS styles, which can be managed in the **CSS stylesheets** application in Kentico.

> **Tip:** 
>
> ### Download the code files
>
> You can copy the code blocks required for the Tutorial from this and the following pages. Another option is to download the HTML and CSS code of the tutorial website here: [TutorialWebsite.zip](https://docs.kentico.com/docsassets/k10tutorial/adding-styles-to-the-website/TutorialWebsite.zip).

To define the styles for the website in this tutorial:

1. Download the **tutorial website package** with sample CSS and HTML code.
2. Open the **CSS stylesheets** application in Kentico.
3. Click **New CSS stylesheet**.

   ![Creating a new CSS stylesheet in Kentico](https://docs.kentico.com/docsassets/k10tutorial/adding-styles-to-the-website/click_new_css_stylesheet.png "Creating a new CSS stylesheet in Kentico")
4. Type _MEDIO clinic - MEDIO stylesheet_ as the **Display name**.
5. Copy and paste the CSS code from the provided sample website – the **styles.css** file.

   ```css title="Tutorial CSS code"

   /* GLOBAL */
   section, footer, header
   {
       display: block;
       clear: both;
   }
   h1, h2, h4, p, a, li
   {
       font-family: 'Lato';
   }
   p
   {
       line-height: 1.75em;
   }

   /* HEADER */

   header
   {
       line-height: 5em;
   }

   header, section:last-of-type
   {
       position: relative;

       z-index: 500;
       -webkit-box-shadow: 0px 3px 6px 0px rgba(50, 50, 50, 0.22);
       -moz-box-shadow:    0px 3px 6px 0px rgba(50, 50, 50, 0.22);
       box-shadow:         0px 3px 6px 0px rgba(50, 50, 50, 0.22);
   }

   .logo
   {
       font-family: 'Lobster', cursive;
       font-size: 250%;
       text-decoration: none;
       color: #ce0000;
       line-height: 2em;
   }
   .logo:hover
   {
       color: #900;
   }

   .nav
   {
       text-align: right;
   }

   nav
   {
       display: block;
   }

   nav ul li {
     display: inline-block;
   }

   nav a
   {
       padding: .5em 1em;
       line-height: 2em;
       text-decoration: none;
       color: #222;
       display: inline-block;
       text-align: right;
   }
   nav a:hover
   {
       color: #ce0000;
       text-decoration: underline;
   }

   /* TEASER */

   .teaser
   {
       display: block;
       background: #ccc;
       padding: 1em 0;
       font-size: 1.3em;
   }
   .teaser p
   {
       background: #fff;
       padding: .8em 1.2em;
       opacity: 0.8;
       text-align: left;
   }

   /* CONTENT */
   .content
   {
       padding: 1em 0;
       font-size: 1em;
   }

   h1
   {
       font-size: 150%;
       font-weight: bold;
   }

   /* FOOTER */
   footer
   {
       background: #680000;
       color: #fff;
       padding: 2em 0;
   }

   footer ul
   {
       list-style-type: none;
       padding: 0;
       margin: 0;
       font-size: 90%;
   }

   address
   {
       display: inline;
   }

   footer ul li
   {
       line-height: 2em;
   }

   footer ul .fa
   {
       width: 16px;
       text-align: center;
   }

   footer a
   {
       color: #fff;
       text-decoration: underline;
   }
   footer a:hover
   {
       text-decoration: none;
       color: #fff;
   }

   .cms
   {
       font-size: 80%;
       display: block;
       float: right;
   }


   ```

   ![Adding the CSS stylesheet code](https://docs.kentico.com/docsassets/k10tutorial/adding-styles-to-the-website/new_stylesheet.png "Adding the CSS stylesheet code")
6. Click **Save**.
7. Switch to the **Sites** tab and ensure that the stylesheet is available for _MEDIO clinic_.

   ![Making CSS stylesheets available for sites](https://docs.kentico.com/docsassets/k10tutorial/adding-styles-to-the-website/stylesheet_is_available_for_website.png "Making CSS stylesheets available for sites")

   If not, click **Add sites** and select _MEDIO clinic_.

You have imported the stylesheet to the system and made it available for the website. Now you need to assign the stylesheet to the website so that all pages use it by default.

Add the stylesheet to the website:

1. Open the **Sites** application.
2. Edit **MEDIO clinic**.

   ![Editing the MEDIO clinic site](https://docs.kentico.com/docsassets/k10tutorial/adding-styles-to-the-website/edit_website.png "Editing the MEDIO clinic site")
3. On the **General** tab, in the **Site CSS stylesheet** drop-down list, select _MEDIO clinic - MEDIO stylesheet_.

   ![Selecting the Site CSS stylesheet](https://docs.kentico.com/docsassets/k10tutorial/adding-styles-to-the-website/assign_stylesheet.png "Selecting the Site CSS stylesheet")
4. Click **Save**.

This ensures that all pages of MEDIO clinic load the prepared stylesheet.

**Previous page:** [Creating a new website](https://docs.kentico.com/k10tutorial/creating-a-new-website.md) — **Next page:** [Working with the Pages application](https://docs.kentico.com/k10tutorial/working-with-the-pages-application.md)

**Completed pages:** 4 of 9

ΟΟΟ**Ο**ΟΟΟΟΟ