18: What is CSS and why do Squarespace designers LOVE it?

Nov 30

Have you ever scrolled through a website thinking, “I wish my site looked THIS good” ?
Well, what if I told you that the key to that aesthetic greatness is right at your fingertips?
Today, we're venturing into the world of CSS customization.

In this episode of ThinkInsideTheSquare, you'll get an overview of what CSS is and why so many Squarespace designers use it.

[00:00:00] Have you ever scrolled through a website and started thinking, I wish my Squarespace site looked this good. Well, what if I told you that the key to that aesthetic greatness is right at your fingertips. Don't let the fear of the unknown hold you back. Today we are venturing into the world of CSS customization.
Welcome to Think Inside the Square, a podcast full of quick tips and tricks to help you create a Squarespace website that you're proud of. I'm your host, Becca Harpain, Squarespace expert and creator of InsideTheSquare. co. In this episode, I'll be talking about my favorite Squarespace topic, CSS, and why so many Squarespace designers love it.
For a transcript of this episode, along with the links to any resources mentioned, visit InsideTheSquare. co/podcast
The term Squarespace is a trademark of Squarespace Incorporated. This content is not affiliated with Squarespace Incorporated.
The design menu in Squarespace has a ton of options for customizing fonts and colors and spacing, but sometimes it still isn't enough.
[00:01:00] That's where CSS comes in. CSS stands for Cascading Style Sheet. It's literally the style of a website. What size images are, what color text should be, what font a button needs to be. All websites have CSS. And Squarespace writes your CSS for you. Whatever options you've selected in your design menu, the colors, the fonts, the spacing, the animations, any selection there, all of that is then translated to CSS.
Squarespace takes your settings and translates it to code behind the scenes. But here's the cool part. Squarespace was created by creative people for creative people. So unlike some other web development platforms out there, they make it super easy for us to add more code so we can customize our site way beyond our design menu.
There is so much I can cover when it comes to CSS. So please consider this quick episode the very tip of the iceberg, my friend. I want you to walk away [00:02:00] excited about the concept and ready to explore, not intimidated by any complicated tech jargon or overwhelmed with ideas. We're going for inspired here.
I'm teaching you something super visual. So please go check out the free guide I made to go with this podcast at insidethesquare. co/learn. It will teach you some simple CSS basics for Squarespace, like how to install the code, and you'll even get some practice codes to try it on your own site.
Again, that's a free guide available at insidethesquare. co/learn. But here in this podcast episode, we're going to stick to the basics. We'll talk about how CSS works and why Squarespace users love it. And we're gonna cover this in like 10 minutes. You ready? I'm ready. Okay, let's do this. You already know. CSS exists on every website. Again, it's an acronym for Cascading Style Sheet. It's the style of everything on your site. From colors to fonts and all the borders and padding in between.
[00:03:00] Squarespace writes your CSS code for you based on your design menu settings, and they also make it easy for you to add your own. Inside Squarespace, when you select Website, then Website Tools Custom CSS is at the very top of that list, and here you can add hundreds of lines of custom code. You can do all kinds of amazing things, like creating custom hover effects for your buttons, or installing your own font, adjusting the padding for a specific image, adding a border to list items.
The possibilities are literally endless. Now, again, I can definitely go down a rabbit hole in creative CSS ideas, and I'm trying to keep these episodes short, so I'm going to share three facts about CSS that I hope will inspire you to give it a try. These three facts are definitely some of the main reasons that Squarespace designers love this code language.
The first CSS fact is that it cannot break your Squarespace site. It changes the style. The way it looks and not the way that it [00:04:00] works. If you add code and you don't like the way things change, just remove it. Unlike Javascript and other code languages, CSS can't change the way something functions. All it can do is change the style.
And I have a hunch that's why Squarespace makes it so easy for us to add it to our website. Okay, the second fact, CSS is not complicated. Honestly, it's not. Sure, you can make it complicated if you want to, but the core concept of this code is simple and it's why Squarespace ers love it. There are three things that every CSS code has, just three.
The name of the thing you want to change, what about it you want to change, and what you're changing it to. That's it. CSS is done. Let me give you an example here. Now, I'm sharing a super visual concept over a podcast, so stick with me on this one. Let's say you want a button, one specific button on your website to be blue.
How do you tell a computer to do that? You need to say, make this button have [00:05:00] a blue background. In CSS, that would be button, background, blue. What you want to change, the specific button. What about it you want to change, the background color. And what you're changing it to, blue. I'll repeat that again.
Button background blue. That's it. That's your CSS statement. Again, CSS is not that complicated. You can overcomplicate it if you want to, but this core concept is very simple, and it's one of the many reasons that Squarespace designers like myself love using CSS.
Okay, I said three facts, right? The first was the fact that CSS is a code that cannot break your sight.
It changes the style, but not the way it works. The second fact is that it's not that complicated. Every custom code has three things, what you're changing, what about it you're changing, and what you're changing it to. And the third fact? Every successful Squarespace designer that I know has dabbled in custom CSS.
Every. Single. One. Now, do you need custom code to create a good Squarespace website? [00:06:00] No, you absolutely don't. Do you need it to create a great one? Yes, you absolutely do. Is that my opinion and technically not a fact? Also, yes, but hear me out. You can take any simple design concept, any Squarespace template, and make it really pop with custom code.
When I first started designing websites, the most I was able to charge was between three to five hundred dollars. Because all I was really doing was taking a Squarespace template, changing out text and images, updating a font and color to match their brand. When it came to truly designing a website, I had to learn custom CSS, and it was a way for me to creatively push past those limitations of the design options in Squarespace.
The last large website project that I charged for was a 15, 000 project, and the only way to make their website vision a reality was with custom CSS. It's why so many Squarespace designers love it, even if they would never call themselves a coder. [00:07:00] To be clear, you can still create a really good looking Squarespace website without custom CSS.
We have some amazing options when it comes to adjusting layouts and working with color themes. You can create a unique website without custom code, but I genuinely believe that just a little bit of custom CSS can take your design vision so much further. then the limitations of that design menu that we all have access to.
Now, no matter what website I'm creating, there are actually a few CSS codes that I use in literally every single one. And by portfolio, we're getting into the hundreds, my friends, but I'm talking about every single site I create. I always add a few specific lines of code. One of the very first ones that I add is actually to customize the lightbox form.
Currently in Squarespace, a lightbox form reverts to a basic font, and there's no way to change it in the design menu. I want to make sure that those fonts match the main fonts on my website. Now, there are definitely a [00:08:00] few other sets of codes that I add to every other Squarespace website that I create, depending upon the client's design vision.
But I do want to stress here that you don't need a lot of code to create that magical Squarespace experience. A little can go a long way.
So that third fact, every successful Squarespace designer I know has used custom code, even if it's just a little bit. To give their Squarespace project that wow factor.
And you can too. It won't break your site. It doesn't have to be complicated. And it is so much easier than you think.
Well, here we are. The end of my quick episode, and I've gotta ask, did it work? Are you inspired to try just a little bit of custom CSS on your site? I genuinely hope so. Head on over to insidethesquare. co/learn to grab my free guide on CSS basics for Squarespace. Again, that's insidethesquare.co/learn
Try a few of the practice codes I've written in there for you and see just how easy it is to take your Squarespace website from good to great.
Thank you so much for listening to this episode of Think Inside the Square. I hope you loved it. I have a lot more tips and tricks to share with you about making an amazing Squarespace website that's uniquely yours, so be sure to subscribe to this podcast wherever you happen to be listening to this episode.
Thanks again for listening, and most importantly, have fun with your Squarespace website. Bye for now.
Free training on CSS Basics for Squarespace: insidethesquare.co/learn