Getting Started with Squarespace CSS
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. Making changes to the CSS file for your Squarespace site is not only easy, but it is a fabulous way to make any good site a great one!
Now if the idea of code gives you the heebie jeebies, don’t worry! If you make a mistake in your CSS, you can always just remove it and Squarespace will work as it was designed to. Consider your backspace button the ideal “undo” option.
This article is a quick overview of the basics on where to add CSS to your Squarespace site, and some of my most requested CSS tricks. If you are more of a visual learner, be sure to watch my CSS Tutorial Videos on YouTube. I break the basic code changes down so you can follow along step by step, and post a new one every Tuesday! Check out the latest below:
Using the CSS Editor in Squarespace
You can use the CSS editor to make site wide changes to your website styles. These will overwrite the standard settings on visual things, like fonts, buttons, images and more. A big word of caution — Squarespace can not provide any support for major CSS changes and only recommend you edit font, colors and backgrounds. That being said, I edit a LOT more than just that on my own website! Remember that backspace button can remove any changes you make, so don’t be afraid to try new and creative ideas.
To change your site wide CSS, navigate from the main menu to design settings, and then to the Custom CSS option. I made a little gif to show you how.
Changing One Page with Code Injection
To make changes to an individual page you can use the Page Code Injection. Now why does that matter? I have a few pages on my site that I use as landing pages. I don’t want these to have the same header navigation as the rest of my site, but I definitely want that to be on every regular page, so I use the Page Header Code Injection option. You can reach this section by clicking on the Page Settings , then the Advanced Tab , and then selecting the Page Header Code Injection . There you have the option to create some custom CSS but a super important step here is to nest it between two HTMl style brackets.
<Style> enter the css code here </style>
Yup , it’s that easy! All you need to do is center it between two html style brackets and the CSS will apply to that page only.
Themes Make a BIG Difference
All Squarespace sites are built using a specific theme family, and that means not all elements are called the same thing behind the scenes. When working in CSS it is important to identify the initial symbol that your CSS code needs to work with an element. If this is going over your head, don’t worry! It really isn’t as complicated as it sounds. When using code, the very first symbol can help the system figure out what you are asking it to do. Some theme families use a pound symbol, or hashtag if you were born after 1985 ( # ) while others use a period ( . ) Brine is a common family that uses ( . ) while Bedford templates generally use ( # ) If your CSS code isn’t working the way you want it to, the first thing you can do to troubleshoot that would be to see if changing the symbol can make it work.
My Top 5 Requested Codes
I try to upload a new tutorial video to my blog every week so this “top 5” changes often, but for now these are my most requested and loved CSS codes:
Removing Your Website Header
.Header, .Mobile-bar{
display:none !important;
background: none;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
Adding A Drop Shadow To Your Website Header
.header {
-webkit-box-shadow: 0px 3px 15px rgba(100, 100, 100, 0.49);
-moz-box-shadow: 0px 3px 15px rgba(100, 100, 100, 0.49);
box-shadow: 0px 3px 15px rgba(100, 100, 100, 0.49);
}
Changing the Social Icons Display Color
You can change the color of the icon by adjusting the hex code below.
.social-icons-style-regular .sqs-use — icon{
fill: #000000 !important;
}
Adding A Drop Shadow To Images
You can change the color of the shadow, as well as the depth by adjusting the bold elements below.
.image-block {
-webkit-filter: drop-shadow( 5px 5px 8px #000000 );
filter: drop-shadow( 5px 5px 8px #000000 );
}
Underlined Form Fields
The following three codes change the standard form to only be underlined. You can choose between solid, dotted and dashed, and change the line color and pixel width in the code itself.
.field-list .field-element{
border-color: #000000 !important;
border-bottom: solid 2px #000000 !important;
border-left: none !important;
border-right: none !important;
border-top: none !important;
background-color: transparent !important;
}
Ready for more?
The five above are just a sneak peak of the amazing things you can do with CSS to customize your Squarespace site. For the first time ever, I put together a CSS cheat sheet with over 50 pages of the codes I use on a regular basis to make my client’s sites amazing. Download your copy today at InsideTheSquare.co/css
What’s your favorite code?
I am always eager to learn new and creative ways to update my Squarespace website. If you have a code snippet that you love to use, let me know in the comments below!
