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
Jo MaglioccoComment