---
title: "Adding a prefix to your style"
date: "2017-11-12T07:56:50+00:00"
summary: "Learn how to enhance your Site Studio styles with custom prefixes. Discover techniques for targeting specific browsers and elements, improving your site's design flexibility and cross-browser compatibility."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/adding-prefix-your-style"
id: "be759d39-f947-48a2-868b-31d6ed8961f5"
---

Important

The Prefix option available in the Style tree **is not vendor prefix**. Site Studio automatically adds vendor prefixes for your where needed.

Using the prefix option
-----------------------

The Prefix option in the Selector menu allows you to add a prefix to a style. This can be any valid CSS selector. For example, you could add a Prefix class to your Heading 1 style called .blue and add a Font color property of Blue to it.  Then, on a parent container add the class .blue. This would target all Heading 1 elements within the container and make them blue.

There are many uses for adding a Prefix to a style. This is advanced functionality for developers.

To add a prefix:

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.  Within the Selector menu, click on the **\+ icon**
4.  Click on **Prefix**
5.  The Prefix menu will open
6.  Within the **Prefix field**, enter your Prefix. This must be a valid CSS selector like .class, #id or element
7.  Click **Add**
8.  The Prefix menu and Selector menu will close and the Prefix will be added to your Style tree
9.  Click on the **Prefix** in your Style tree to return to the form and add CSS properties to it.

![c3d598a8-adding-a-prefix.gif](https://acquia.widen.net/content/bef5691e-6e1d-46e3-b9c1-6fc21d02649e/web/c3d598a8-adding-a-prefix.gif?animate=true)

Targeting IE browsers with a prefix
-----------------------------------

Site Studio includes a number conditional statements for Internet Explorer that allow you to provide different styles for these browsers. To target a specific version of Internet Explorer you can add a Prefix class to your style. These are:

*   .coh-ie9 
*   .coh-ie10
*   .coh-ie11

To add a prefix:

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.  Within the Selector menu, click on the **\+ icon**
4.  Click on **Prefix**
5.  The Prefix menu will open
6.  Click on **IE 9** to target IE9 or within the **Prefix field**, enter **.coh-ie10** or **.coh-ie11**
7.  Click **Add**
8.  The Prefix menu and Selector menu will close and the Internet Explorer browser prefix will be added to your Style tree
9.  Click on the **Prefix** in your Style tree to return to the form and add CSS properties to it.