# Editing theme styles

> The complete set of styles for each theme is contained within the `style.css` stylesheet in the [root directory of the theme](/documentation/overview/navigating-the-theme-folder).

Source: https://www.zenplates.co/documentation/customization/editing-theme-styles (Customization › Introduction)

## Editing styles

Although you shouldn't have to write any custom CSS because of our versatile [utilities](https://www.zenplates.co/documentation/utilities/understanding-utilities/) and [elements](https://www.zenplates.co/documentation/elements/understanding-elements), you can do so at any time.

There are two ways to go about making changes to your theme's stylesheet:

1. You can update the `style.css` file directly, either through the Zendesk [code editor](https://support.zendesk.com/hc/en-us/articles/4408839332250-Customizing-your-help-center-theme) or locally using your favorite code editor. Any changes made will be immediately reflected in your help center without the need to take any further steps.

2. You can update the [Sass source files](https://www.zenplates.co/documentation/customization/using-sass-source-files) in the `scss/theme/` folder. This could include specifying new values for framework Sass variables, adding your own custom declarations or taking advantage of the functions and mixins that are included with the framework. If you take this approach you will need to [re-compile the stylesheet](https://www.zenplates.co/documentation/customization/using-sass-source-files#compiling-sass) once you've made your changes.

Whichever approach you choose, the theme's `style.css` file is a standard stylesheet but for some minor differences:

-  Theme settings are [included as variables](https://support.zendesk.com/hc/en-us/articles/4408839332250-Customizing-your-help-center-theme#topic_oc1_bxt_gbb) using underscores as separators. For example, the value of the **Primary color** setting can be accessed in CSS using `$color_primary`.

-  A limited set of Sass-like functions are available, like the `darken()` function which makes a given color darken by some percentage amount. For example:

  ```html
  a:hover {
    color: darken($color_link, 4%);
    text-decoration: underline;
  }
  ```