---
title: "Applying styles to elements"
date: "2017-11-12T15:52:17+00:00"
summary: "Learn how to enhance your website's appearance by applying CSS styles to elements. Discover two methods: using custom styles and the style tab. Follow step-by-step instructions to create visually appealing layouts effortlessly."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/applying-styles-elements"
id: "1e06a7ca-6bce-4325-8a6f-912e8ddf8b78"
---

You can apply CSS styles to elements to alter their appearance and layout. To apply a style to an element you have two options:

Apply custom style
------------------

When you create a Custom style it becomes available to Elements in the Layout builder. 

To apply a Custom style to an element:

1.  Create a Custom style for a specific element type. For example, a Blockquote custom style
2.  Navigate to a page or template which includes the Layout canvas
3.  Add an element to the Layout canvas that matches the Custom style type you've created. For example, add a Block quote element. For more, see [Using the layout builder](/drupal-starter-kits/add-ons/site-studio/using-layout-canvas-create-layouts-templates-and-components "Using the layout builder")
4.  Double click on the **Element** to edit its settings
5.  Within the Custom style area, click on the **Drop-down** and select your **Custom style**. If there isn't a Custom style drop-down shown, click on the **Properties** button and then click > Settings > **Custom style** to add this option to your form.
6.  Click **Apply** at the bottom of the Element settings form
7.  Click **Save**
8.  The Custom style will be applied to the element.

Important

You can apply more than one custom style to the same element. Click the **Add custom style** link in the bottom right of the Custom style form area. 

![3cecb3a8-applying-a-custom-style.png](https://acquia.widen.net/content/5f9c974e-7982-49b8-8c85-aa927e312f87/web/3cecb3a8-applying-a-custom-style.png)

Add styles with the styles tab
------------------------------

You can create styles directly within the Element using the Style tab. This opens the Style editor within the Elements user interface. When you create styles directly on Elements, a separate style is generated for the specific instance of the element. This is useful for adding specific CSS properties to elements that are only required on the page or template. For example, you may want to set the height of a container on a template where the height is only required once.

For more about using the Style editor, see [Using the style editor](/drupal-starter-kits/add-ons/site-studio/using-style-builder "Using the style builder")

Important

Styles applied with the Styles tab override styles applied with the Custom styles drop-down. This is because they are more specific.

To apply styles directly to the element:

1.  Double click on an Element on the Layout canvas
2.  Click the **Styles tab**
3.  Click the **Properties button** to add CSS properties
4.  Click **Apply.**

![524b2b9c-applying-inline-styles.gif](https://acquia.widen.net/content/fed1f41a-8d29-4b08-9200-c0c2fa4b3e06/web/524b2b9c-applying-inline-styles.gif?animate=true)