How to apply custom CSS classes

Hello,

I created a custom CSS class in the design editor. How do I apply my class to an object on the page?

Target object class/id with Inspect Element, then add CSS to Home > Design > Custom CSS

Thanks tuanphan,

I'm not sure I understand. I know I can inspect elements and add CSS classes to them, but how do you save it? As soon as I refresh the page, the class disappears from the element.

This is what I have as my custom CSS:

.xxx {
    color: green;
}

How do I add xxx to a <span> element permanently?

The only way to add a custom class to an element is to add the element yourself using a Code Block. 

30 minutes ago, e2astudio said:

The only way to add a custom class to an element is to add the element yourself using a Code Block. 

You mean by injecting javascript code?

59 minutes ago, Gibran said:

You mean by injecting javascript code?

No. Generally, there are two ways to customize page elements with CSS.

1. The method @tuanphan is describing (inspect a Squarespace element and find the class already assigned by the system or template, then override or add styles to that specific class in Design -> Custom CSS)
2. Add your own custom class with styles in Design -> Custom CSS and then add a Code Block containing the HTML with your custom class assigned.

I see. Thanks e2astudio.