Simple Intro to Adding Custom Styles in Squarespace

A simple overview of adding custom styles to your Squarespace site — plus unique CSS cides you can add to jazz up your site!

One of the things I love most about Squarespace is how flippin’ easy it is to customize so many elements of your website.

Many people will never need to go beyond the default Squarespace style options.

But I said many people.

You are looking for even more Squarespace styling, right?

If you’re ready to add extra pizazz to your Squarespace website, there is a special area to add style options.

Introducing…

Squarespace Custom CSS

You may be thinking…

Wait a minute. CSS whatnow?

If you’ve never encountered CSS before, never fear.

It’s pretty dang straightforward.

Here’s an easy way to think about your Squarespace website’s two parts…

HTML is the content of the site — the text, images, links, etc.

CSS is the style of the site — the fonts, colors, and layout.

So basically, your CSS sets the style of your HTML content.

Here’s an overview of where to access the custom CSS of your Squarespace site — plus some examples of unique styles you can add to jazz up your site!

Here are the examples I use in that video:

.lowlight {
background: linear-gradient(180deg, rgba(255,255,255,0) 50%, #8cb8ba 50%);
}

.narrow-title {
letter-spacing: -0.06em;
}

.wide-title {
letter-spacing: 0.5em;
}

.vertical-title {
writing-mode: vertical-rl;
transform: rotate(180deg);
margin: 0 auto;
position: relative; right: 10px;
}

Check out these step-by-step guides to customize your Squarespace website…