---
title: "Creating custom styles"
date: "2017-11-10T15:48:06+00:00"
summary: "Learn how to create and apply custom CSS styles in Site Studio. Discover step-by-step instructions for building, managing, and implementing custom styles across your Drupal website's components and WYSIWYG editor."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/creating-custom-styles"
id: "c1641cf7-0d74-40c6-bb5b-f30077b33cb1"
---

Table of contents will be added

You can create Custom styles using the Style builder.

### Important information about custom styles:

*   Custom styles are CSS classes
*   They are prefixed with _.coh-style-_ to prevent them from conflicting with other CSS classes
*   They are grouped into categories that correspond with the types of element they can be applied to.

Create a custom style
---------------------

To create a Custom style:

1.  Navigate to Site Studio > Styles > **Custom styles** 
2.  Click **Add custom style**  
      
      
    
    ![eb891c9b-add-custom-style.png](https://acquia.widen.net/content/aa703908-ca92-4751-a1f7-b8c7a5de9477/web/eb891c9b-add-custom-style.png)
    
      
     
3.  In the list of Custom style types, click on the **Custom style** type you want to create  
      
      
    
    ![85604ccd-select-custom-style-type.png](https://acquia.widen.net/content/c628776c-ab98-4cdb-b410-6c664a2d5bb2/web/85604ccd-select-custom-style-type.png)
    
      
     
4.  On the next screen, enter a name in the **Title field** for your Custom style. This will be used to generate the class name. It will be prefixed with .coh-style- to prevent it from conflicting with other classes  
      
      
    
    ![d33d4302-custom-style-title-class.png](https://acquia.widen.net/content/c3b0d249-3918-4728-8362-151aea5bb92b/web/d33d4302-custom-style-title-class.png)
    
      
     
5.  Add CSS Properties to your Custom style using the Style builder. For more, see [Using the style builder](/drupal-starter-kits/add-ons/site-studio/using-style-builder "Using the style builder")
6.  Click **Save and continue**  
      
    
    ![f89ad526-add-properties-save-style.png](https://acquia.widen.net/content/9c236af2-e641-48bb-b37c-9310cb3191d2/web/f89ad526-add-properties-save-style.png)
    

Making your custom style available in your WYSIWYG
--------------------------------------------------

You can make your Custom style available in your WYSIWYG editor as both an element style and an inline span. For more, see [Editing content with the WYSIWYG.](/drupal-starter-kits/add-ons/site-studio/editing-content-wysiwyg "Editing content with the WYSIWYG")

To make your style available to the WYSIWYG,

1.  Navigate to Site Studio > Styles > **Custom styles**
2.  Click on a Custom style to make available in the WYSIWYG
3.  At the bottom of the screen, click on the checkbox labelled **Make available in WYSIWYG editor**

![64e7e9fa-make-available-wysiwyg.png](https://acquia.widen.net/content/049dd17a-5264-4b30-b5ab-6fea6e6dfb3d/web/64e7e9fa-make-available-wysiwyg.png)

Applying custom styles to elements on the Layout canvas
-------------------------------------------------------

When you create a Custom style, it's made available to Elements on the Layout canvas.

To apply a Custom style to an element:

1.  Navigate to a component or template to access the Layout canvas
2.  Add an element to the Layout canvas that matches the Custom style type you've created. For example, add the Link element.
3.  Double click on the **Element** to edit it's settings
4.  Within the Custom style area, click on the **Drop-down** and select your Custom style. 
5.   Click **Apply** at the bottom of the Element settings

![65d95f54-select-custom-style-on-element.png](https://acquia.widen.net/content/ef06ccec-d86d-4599-a2f7-59b53339fa00/web/65d95f54-select-custom-style-on-element.png)