# CSS Styling

## The 'Public' Directory

* CSS
  * Sass
    * partials
      * \_carousel.scss
      * \_overrides.scss
      * \_variables.scss
  * main.css
* img
* render

### Sass directory

This directory contains the sass code for scss which can be used to generate css using sass compiler.&#x20;

### \_carousel.scss

This contains the styling properties for the main slider on the homepage of the website.

You can easily change some quick settings of the main slider from here. For example, to change the background color of the carousel, set the background-color property to your desired value`background-color: $secondary-color;  .` You must note that $secondary-color is being picked from `_variables.scss` file by import method.

### \_variables.scss

#### **Changing theme colors**

```css
$primary-color: #1abc9c;
$secondary-color: #27ae60;

$heading-size-h0: 44px;
$heading-size-h1: 27px;

$border-radius: 3px;
$font: 'Lato', sans-serif;
```

You can see that this file contains the main styling scheme of the theme. you can play with these variables to come up with your own set of theme. We use these variables on global scope to style all the web pages of the theme.&#x20;
