How To Customize Your Code Like A Pro

What is CSS?

CSS stands for “cascading style sheet” and it’s a fancy way of making your Squarespace website do something special, outside of its normal functions. If you want to learn more about how to install custom CSS in Squarespace, check out this article here: What is Custom CSS and How To Use It in Squarespace


Customizing Code: My Top Three Tips

P R O   T I P #1

Anytime you see the # symbol followed by a set of six numbers, this is hexadecimal value color code, HEX code for short. You can make  any of the codes in the PDF match your brand by changing those six digits to match your brands HEX code color scheme.  Click here to learn more about HEX codes

P R O   T I P #2

If it seems like a piece of your code isn’t working, it could be that the system CSS is trying to overwrite your changes. To help a browser prioritize your code over the standard one, you can tell it that your code is important by literally labeling it important. Add the text !important before the ;  symbol in your code. Buttons are notorious for this problem, so you will notice that most of the button codes below include !Important in quite a few places.

P R O   T I P #3

Most elements that you can change with code can also have a hover effect. This means you can have the element display differently when a cursor is over it. While buttons and images are the two most popular places to have hover effects, you can create this in any code by adding :hover after the element name and before the {

Ready for more?

If you are ready to jump into creating your own CSS codes, start with my CSS Cheat Sheet. With a collection of over 50 custom codes verified and tested by me, along with a ton of pro tips in one PDF, it’s the ultimate resource for anyone ready to customize their Squarespace site with CSS.