---
title: "Using the style builder"
date: "2017-11-10T16:08:44+00:00"
summary: "Discover how to create stunning CSS styles visually with Site Studio's Style builder. Learn to use selectors, properties, and breakpoints for efficient web design."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/using-style-builder"
id: "55b1a9b2-9be6-4f18-b612-3ed07d18a42b"
---

The Style builder provides a visual interface for creating CSS styles. It's accessed by creating or editing a [Base style](/drupal-starter-kits/add-ons/site-studio/creating-base-styles "Creating base styles") or [Custom style.](/drupal-starter-kits/add-ons/site-studio/creating-custom-styles "Creating custom styles") 

The Style builder has a number of features. Each of these have been described in the following sections:

1.  **Style preview -** Use this to see what your style looks like while you're creating it. See [Using the style preview](/drupal-starter-kits/add-ons/site-studio/using-style-preview "Using the style preview")
2.  **Base style selector** \- Use this to set the base style selector to target. See [Creating base styles](/drupal-starter-kits/add-ons/site-studio/creating-base-styles "Creating base styles")
3.  **Selector menu** - Use this to add CSS selectors to your style. See [Using CSS selectors](/drupal-starter-kits/add-ons/site-studio/using-css-selectors "Using CSS selectors")
4.  **Properties menu** - Use this to add CSS properties to your style. See [Applying CSS properties](/drupal-starter-kits/add-ons/site-studio/applying-css-properties "Applying CSS properties")
5.  **Style helpers** - Use these as 'quick starts' when creating styles. See [Using and creating style helpers](/drupal-starter-kits/add-ons/site-studio/creating-and-using-style-helpers "Creating and using style helpers")
6.  **Tidy styles** \- Use this to remove empty fields from the style builder  
7.  **Open token browser** - Use this to open the Drupal token browser and insert tokens. [See Using the token browser](/drupal-starter-kits/add-ons/site-studio/using-token-browser "Using the token browser")
8.  **Toggle variable mode** - Use this to toggle the style editor into variable mode to insert tokens
9.  **Breakpoint menu** - Use this to add CSS properties to specific breakpoints. See [Applying CSS properties](/drupal-starter-kits/add-ons/site-studio/applying-css-properties "Applying CSS properties")

![0817e22a-using-the-style-builder.png](https://acquia.widen.net/content/c01b3a4e-a60b-4893-9dc8-325c7beec0f2/web/0817e22a-using-the-style-builder.png)