The Style builder provides a visual interface for creating CSS styles. It's accessed by creating or editing a Base style or Custom style. 

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

• Style preview - Use this to see what your style looks like while you're creating it. See Using the style preview
• Base style selector - Use this to set the base style selector to target. See Creating base styles
• Selector menu - Use this to add CSS selectors to your style. See Using CSS selectors
• Properties menu - Use this to add CSS properties to your style. See Applying CSS properties
• Style helpers - Use these as 'quick starts' when creating styles. See Using and creating style helpers
• Tidy styles - Use this to remove empty fields from the style builder  
• Open token browser - Use this to open the Drupal token browser and insert tokens. See Using the token browser
• Toggle variable mode - Use this to toggle the style editor into variable mode to insert tokens
• Breakpoint menu - Use this to add CSS properties to specific breakpoints. See Applying CSS properties

Using the style builder