CSS For Squarespace Beginners

CSS for Squarespace Beginners | A Few Tips and Tricks to Get You Started

CSS, it's the lipstick and sometimes foundation of web design. For squarespace users it's the easiest way to customize your site, or add special features without needing to dive into the developer side of things. For newbies to the web design world, this is a daunting task. You can search squarespace forums and look up plugins and tutorials for hours, and still not have a handle on the entire thing. Here's all it is. 

CSS is like putting a sticky-note on a item and giving it a note. That note can be duplicated around the site, so that the element has the same features. This can range from text to image overlays, padding + margins as well as changing the features in conjunction with scripts or other injected code. 

For those new to CSS it means "cascading style sheet" meaning what comes last is king. Meaning if you have two of the same tags, the newest one will cancel the old one out. This is why you can over-ride the settings that are in your squarespace "template" when you open it up. Your new code over-rides what is already there since it is adding it on the bottom of the sheet.

First things first. This isn't a tutorial to learn to write CSS, but instead a few helpful tricks, and some fun ideas to help you get your imagination started.

1. There are two places where you can inject css. 

First there is the custom css window. This is your go to for Global Changes. You want the searchbar to be bright blue on every page. Change it here. 

The second location is a code block. You've probably scrolled past it in your block injection screen and said, code... um no. Well, don't be discouraged. You can add css to an individual page. It is only going to apply in one location, your search bar on your about page can be different than the one on your blog! Yippee! Check out our video on single page css coming soon!

2. consider adding new styles.

One thing I try to think about is WHY I am using something different than what a template can provide. Do you need another color of text beyond just 3? Is it possible you might want to use h1, h2, h3 and body copy on one page and still need another varietal? Ok. It's time for an h4 then. Note, because this is not developer, we can't add it to your text drop down, but you can use it in your markdown styles.

try out this code for a h4 like this one

h4 {
  font-family:brandon-grotesque;
  font-size:14px;
  color:#2b2b2b;
  text-transform:uppercase;
  letter-spacing:.2em;
    }

3. Start small. 

The most important thing when learning how to do some of these fun web-edits is learning how or when to pull back. Without lots of web development knowledge I wouldn't dive into changing things like headers, navigation bars or padding between items. Work first with the typography on the page, edit items like buttons, search bars, newsletter blocks, maybe adding a border to a footer like below! Once you feel comfortable then you can dive into testing things out. I highly suggest creating a trial site to test out big items, if you are new to the game, this way testing doesn't mess up your site.

4. Not all templates are the same

You might have noticed if you are searching around the squarespace forums that often people respond, "that didn't work for me!" Sorry to break your heart, but it means you will need to do some searching for your own tag. In CSS the most essential thing is finding what is is you need to change. That #footer might be #page-footer on your template. So make sure you check out our video on finding and checking css tags for beginners coming soon!


JOIN OUR COMMUNITY FOR MORE CSS TIPS & TRICKS!