---
title: "Using the style tree"
date: "2017-11-12T07:00:02+00:00"
summary: "Learn to use the Style tree in Site Studio to efficiently apply CSS properties to different selectors. Master adding, editing, and organizing selectors for powerful, flexible styling of your website."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/using-style-tree"
id: "0e512b0d-77e8-4b54-b5b2-cc25f6a65cf9"
---

Table of contents will be added

You can apply CSS properties to different selectors within your style using the Style tree.

Step 1 - accessing the style tree
---------------------------------

1.  Navigate to the Style builder. This is available when you edit [Base styles](/drupal-starter-kits/add-ons/site-studio/creating-base-styles "Creating base styles") or [Custom styles](/drupal-starter-kits/add-ons/site-studio/creating-custom-styles "Creating custom styles"). 
2.  Within the Style editor, click on the **Style tree button.** This will say **Default** on it
3.  The menu that opens is called the Style tree

![c798eb38-accessing-style-tree.gif](https://acquia.widen.net/content/5b06c50c-0262-48d5-85fa-2a902f27a39c/web/c798eb38-accessing-style-tree.gif?animate=true)

Step 2 - Adding a new selector
------------------------------

To add a new selector to the Style tree:

1.  Within the Style tree, click the **\+ Icon**
2.  The Selector menu will open
3.  Click on the **Selector** you want to add
4.  The Selector menu will close and the selector will be added to the Style tree

![9e60778b-adding-css-selector.gif](https://acquia.widen.net/content/1d8aca21-7c32-46ac-ab68-2c309387c8dc/web/9e60778b-adding-css-selector.gif?animate=true)

Step 3 - Adding CSS properties to a selector
--------------------------------------------

To add properties to a selector:

1.  Click on the **name** of the selector in the Style tree
2.  The menu will close and the properties form for the selector will open
3.  Add properties to the form using the **Properties** menu.

![e1b6c809-applying-css-property-to-selector.gif](https://acquia.widen.net/content/ff332e12-4c39-413f-8699-3b3463dfa8f6/web/e1b6c809-applying-css-property-to-selector.gif?animate=true)

Changing the order of the selectors in the style tree
-----------------------------------------------------

The order and position of a selector in your Style tree will effect the way your CSS properties are applied. For example, If a selector is nested within another selector, it will only be applied when the parent selector is applied.

To change the order and position of selectors in your Style tree:

1.  Click and hold a **Selector** in your Style tree
2.  Drag the selector **up, down, left and right** to reposition it.

![47cd6fd9-reordering-selectors.gif](https://acquia.widen.net/content/e8d17c2b-17c5-4406-9e89-e30ddcc6e41d/web/47cd6fd9-reordering-selectors.gif?animate=true)

Deleting selectors from your style tree
---------------------------------------

You can delete selectors from your Style tree. When you delete a selector it will delete any properties that have been applied to it.

To delete a selector:

1.  Click on the **Style tree button** to open the Style tree
2.  Next to the selector you want to delete, click on the **\+ icon**
3.  The Selector menu will open
4.  Click on **Delete** at the bottom of the Selector menu
5.  Click **OK** in the confirmation modal
6.  The selector will be removed from your Style tree.

![d1d772dd-deleting-a-selector.gif](https://acquia.widen.net/content/74783661-b94c-4d0c-ad1f-5a84bcd7178e/web/d1d772dd-deleting-a-selector.gif?animate=true)

Editing the name of a selector on your style tree
-------------------------------------------------

You can edit the name of child, modifier, custom pseudo and prefix selectors that you've added to your style tree. You may want to do this if you have made a mistake or simply need to change a selector you've already applied CSS properties to.

To edit a selector name:

1.  Click on the **Style tree button** to open the Style tree
2.  Next to the selector you want to edit, click on the **\+ icon**
3.  The Selector menu will open
4.  Click on **Edit** at the bottom of the Selector menu
5.  Enter the new name of your selector in the field and click **Update**
6.  The selector will be changed on your Style tree.

![a5838a63-editing-a-selector.gif](https://acquia.widen.net/content/885641e1-419b-4305-ac1f-3bc0b641075f/web/a5838a63-editing-a-selector.gif?animate=true)