You might find the customizations available for text and asset style presets are insufficient for your site, and so you might want to insert your CSS code to add extra options.

To do that, you can add custom CSS right within the site editor˜!

First, you have to add a new style preset into the theme, and apply the new style preset to the tile/s via the site editor, and get the ID for this new style preset.

1. View or preview the site.

2. From the Google Chrome menu, select View > Developer > Developer Tools or by simply pressing Ctrl+Shift+I on your keyboard.

3.  Click the Inspect button, This button is the first from the top corner of the Developer Tools menu, as shown below.

4. Hover the pointer over the tile that uses your style preset until you see the content ID and the class name (style preset name), and click it. This usually has the keywords "uuid" and the name of the style preset set in the theme, or the Style Preset drop-down in the site editor. In my example below, the content ID is 3479885 and the style preset name is blue background.

5. Copy the name of the style preset followed by the ID. In my example, the class name ID I need to copy is red-top-border-48mx9.

Once you have the stylesheet ID of the new style preset, you can then use it to create your custom code!

1. Open the editor for the site.

2. Click Styling on the left editing panel and click Edit Site CSS ... under Local Site Styles and you can scroll to the bottom of the editor if it is not empty with other CSS snippets.

3. Insert your code, including the class name you copied earlier to target the style preset that you want to customize, such as shown below.

In this example, I only want to put a border at the top of the tile using my custom style preset, and I want the border to be 4px thick, and rendered in color red, so my code goes,

.red-top-border-48mx9 .tile {

     border-top: 4px solid #FF0000;
​
​}

4. Click the green Publish button on the upper left.