---
title: "Applying custom CSS properties"
date: "2017-11-12T06:49:05+00:00"
summary: "Learn how to apply custom CSS properties in Site Studio. Enhance your styles with advanced CSS techniques not available through the standard Properties menu. Perfect for developers and designers."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/applying-custom-css-properties"
id: "f39e3628-bb93-42d2-9e21-a9ee396dbe06"
---

Table of contents will be added

There are CSS properties that are not available through the Properties menu. If you require a CSS property not provided you can add it using the Custom CSS option.

Adding a custom CSS property to a style
---------------------------------------

To add a custom CSS property:

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"). For more, see [Using the style builder](/drupal-starter-kits/add-ons/site-studio/using-style-builder "Using the style builder")
2.  Within the Style editor area, click on the **Properties** button
3.  Then select **Custom CSS** in the menu.

Custom CSS
----------

### Expected values

*   Add the CSS property name in the **CSS property field**
*   Add the CSS value in the **CSS value field.**

For example:

![35a143b3-Custom-css.png](https://acquia.widen.net/content/c6705f60-d7fa-4f69-af32-4cea7a053adb/web/35a143b3-Custom-css.png)

Important

Values entered into the values field require units to be added if units are required. For example, 100rem, 100px, 45deg. Site Studio **does not** automatically convert unitless values to REM's.

Add multiple custom CSS properties
----------------------------------

To add additional Custom CSS properties to the same style:

1.  Below the Custom CSS property fields, click **Add**
2.  A new row of fields will be added to the form
3.  Add the CSS property name in the **CSS property field**
4.  Add the CSS value in the **CSS value field**
5.  Repeat this process to add additional Custom CSS properties.

![d73252ad-Add-multiple-custom-css.png](https://acquia.widen.net/content/2fe59390-75bf-47df-9500-d79d1c2ea2c0/web/d73252ad-Add-multiple-custom-css.png)

Remove custom CSS properties
----------------------------

To remove Custom CSS properties from the style:

1.  Above the Custom CSS property fields, click the grey **Delete icon**
2.  The property will be removed.

![23153884-Remove-custom-css.png](https://acquia.widen.net/content/56b61e0d-0575-4e23-9684-bb53a7a22ce6/web/23153884-Remove-custom-css.png)