Easy Copy and Paste Squarespace CSS Codes

One of the great things about Squarespace is the endless customization options with no coding required, especially with the release of the new Squarespace Fluid Engine editor. But sometimes, you want to take your Squarespace site to the next level and make it stand out even more. That’s where CSS code for Squarespace comes in.

Today, I’m sharing some of my go-to Squarespace CSS code snippets that you can easily copy & paste to your Squarespace website. CSS certainly sounds overwhelming, but trust me, these Squarespace CSS hacks require minimal effort for a big impact. Let’s get started!

What is CSS?

Before we dive into some fun Squarespace CSS tricks, let’s start with the basics of website code. There are 3 main types of code used to build websites: HTML, CSS, and Javascript.

HTML—short for HyperText Markup Language—is the structure of a website and the building blocks of any web page. Every website is built with HTML, whether you are using a website platform like Squarespace or building a website from scratch. HTML is then enhanced or modified by CSS codes or Javascript.

CSS, or cascading style sheets, is a type of web language that describes how things appear and are displayed on a website. You apply CSS code to web page elements—like text or images—to customize their appearance on a website.

CSS code allows you to style various elements on your site. If HTML is the structure of your digital home—the framing and the drywall—then CSS is the paint, wallpaper, and decor that starts to bring things to life. With CSS code, you can adjust fonts, colors, the position of elements, and so much more. The creative possibilities are truly endless when you add custom CSS to your Squarespace site!

Javascript on the other hand is all about interactivity. Javascript modifies website content to make it behave in different ways based on a user’s interaction with the element. For example, a pop-up box on a website uses Javascript.

Javascript code is quite complex and takes up a lot of space on the backend of your website. While interactivity adds unique elements to your site, you want to ensure you don’t load down your Squarespace website with too much Javascript or it will load very slowly.

How To Add Custom CSS in Squarespace

When you add custom CSS in Squarespace, you are adding code snippets that override the base HTML and CSS of the website. If you’re new to the world of coding, you’re probably thinking: where is custom CSS in Squarespace? How do I add custom CSS in Squarespace?

To add custom CSS in Squarespace, you’ll click Design from the main navigation panel on the left-hand side. From there, you’ll click Custom CSS at the bottom. It’s as easy as that!

You can add your code to the custom CSS panel in Squarespace or you can click the “open in new window” button to see the CSS panel a bit larger.

Squarespace Fixed Header CSS Code

Have you ever been scrolling on a website and the header or main navigation stays put at the top of the browser? This is called a fixed header, or sticky header.

Having a fixed header on your Squarespace site is great from a user-experience standpoint so that your website visitors can easily navigate to different pages without having to scroll all the way back to the top. A fixed header is a great alternative to a “back to top” icon.

To add this CSS code snippet to your Squarespace website, you’ll want to navigate to Design > Custom CSS. Adding the code here will adjust the design and display of the entire site, which is what we’re looking for with this Squarespace fixed header.

Here’s the Squarespace fixed header CSS code you’ll want to copy and paste:

.Header {
position: fixed;
z-index: 9999;
width: 100%;
top: 0px;
}
.Content-outer {
margin-top: 120px;
}

Be sure to hit Save after you’ve added the CSS code to the custom CSS panel. Be sure to take a look at how it looks on your site and adjust any elements needed, like margin-top, for example.

Adjust the Width of Blog Posts with Custom CSS Code

Have you ever read a blog post from your desktop and the text goes from one side of the screen all the way to the other and your eyes get a bit lost? Or you’re reading a blog post on mobile and the paragraph is painfully thumb-scrolling long? Yup, me too!

This is where custom CSS code comes in handy! With this copy & paste code snippet below, you’ll be adjusting the width of all blog posts across your site so that they are visually appealing and much easier to read.

Note: As important as it is to not have your blog posts go the full width of the screen, be sure to not make them too narrow or the reader’s eyes will have difficulty bouncing between lines.

To add this CSS code snippet to your Squarespace website, you’ll again want to navigate to Design > Custom CSS. Adding the code here will adjust the display width of blog posts across your entire site.

Here’s the code you’ll want to copy and paste to adjust the width of blog posts on your Squarespace website:

.BlogItem {
max-width:850px;
margin: 0 auto;
}

Be sure to hit Save after you’ve added this easy bit of CSS code. Take a look at how it looks on your site and adjust the max-width pixels to suit your needs. The general rule of thumb for blog post width is about 50-75 characters, including spaces. Depending on your font, this could be between 650px to upwards of 900px.

Remove Hyphens with Custom CSS

I don’t know about you, but having hyphens pop up all over your website—especially on mobile—isn’t very aesthetically pleasing…or easy for people to read for that matter. As I’m sure you’ve guessed by now, there’s CSS code for that!

Now, your first instinct might be to adjust the font directly on your site by adjusting the spacing, sizing, etc. Unfortunately, once you get it to look right on mobile, the desktop version of your site is all a mess. With this CSS code snippet, there’s no adjusting font sizes or spacing, the hyphens are automatically removed for you.

Since you want this code applied to your entire Squarespace site, you’ll navigate to Design > Custom CSS just like we have for the previous code snippets.

Here’s the code you’ll want to copy and paste to remove hyphens from your Squarespace website on both desktop AND mobile:

p, h1, h2, h3 {
-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;
}

CSS Important Tag

Do you see in the code snippet above that reads “!important;” at the end of each line? This is called an important tag in CSS. The CSS important tag tells Squarespace to prioritize this CSS code over the general, base code of the site.

Looking at the code above to remove hyphens from your Squarespace site, the CSS important tag tells Squarespace that this set of code is the most important and to remove hyphens on both desktop and mobile.

Remove Underline from Link with CSS on Squarespace

When you hyperlink text, it will typically change the color and add an underline. This helps the linked text stand out from the rest of the text on the website.

But perhaps you want to remove the underline from links on your Squarespace site. There’s CSS code for that!

So once again, you’ll navigate to Design > Custom CSS to add this custom CSS code. Here’s the code you’ll want to copy and paste to remove the underline:

p a {text-decoration: none !important}

In this code snippet, “p” represents your standard body copy and “a” represents links. So the first bit of this code is saying, “Hey Squarespace, any body text that is a link…”

Then in the brackets, “text-decoration” is the underline and “none” means well, we don’t want the underline. So now our code is saying, “Hey Squarespace, any body text that is a link, don’t display the underline.”

And then as you just learned above, the CSS important tag tells Squarespace that this piece of code should be prioritized over the base code. Since Squarespace would typically include an underline for any linked body copy, the important tag now tells Squarespace to ignore that and to pay attention to this code snippet that’s removing the underline.

Pretty cool, right?!

And there you have it, some simple copy-and-paste CSS codes for your Squarespace website. These Squarespace CSS code snippets are easy to add to your site and make a big impact when it comes to user experience.