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.

Hello I have title on top like this. How can I make the text slider? Because I can not add slider class to div.

@media screen and (min-width:641px) {
.Header-inner.Header-inner--top {
 div {
  font-weight: bold;
  position: relative;
  font-size: 50px;
}
padding: 10px;
text-align: center;
background:  #FF0099;
color: white;
}
}

@tuanphan Hi how do I find my class code for my website?

On 1/9/2023 at 11:55 AM, Reflexeon said:

@tuanphan Hi how do I find my class code for my website?

Hi,

Use Inspect element. What is your problem? We can help easier.