Creating A New HTML Class In Squarespace

Sometimes Squarespace can be a nightmare. Even if you know how to write CSS sometimes you can't style something the way you want, or you can't create what you want unless you know how to write HTML.

So for those that are just starting to dabble in the coding world (likely because Squarespace requires it) learning how to make a new html class is key.

Here’s how you can create and style a new html class for…well, anything!

 

Step 1:

Add a code or markdown block to your page with your new class using class=”class-name” in your html code.

Example

< div class=”outlined“ >outlined text< /div >

*we have added spaces to the example so that it does not render. to use the code, format without spaces.

 

Step 2:

Style the class! Write all the CSS you need in Custom CSS and target the new class name.

.class-name

{property: value;}

Example

.outlined

{border: 1px solid #000000;

text-align: center;

padding: 20px;}

 

Example of “outlined” class

outlined text
 

Pro Tip: Anytime we reference custom classes on Squarespace, we will embed a code pen so you can play with the code. It’s a great resource for testing out code and seeing the effects prior to adding it to your website. It doesn’t work to test Squarespace’s classes - but you can design and style custom ones anytime.