New CSS Tricks for Your Squarespace Author Website

• This article contains affiliate links •

If you’re curious how to make your Squarespace author website more individual, or you’ve run into some design constraints in the drag-and-drop editor, you might have heard of the possibility of using CSS to make tweaks to your website pages.

This is not a beginner-level post…

…but if you’re ready to experiment and get beyond the basics, CSS can be helpful and, I find, very satisfying. Read on for two CSS suggestions — newly released in 2024 — that I think authors, in particular, will like.

Just getting started with Squarespace? Save 10% off your first subscription of a website by using the code PAULINE10

What is CSS?

The acronym CSS stands for Cascading Style Sheets. Simply put, CSS helps us style a website page. It’s a powerful way of creating beautiful designs, and a tiny piece of code can potentially adjust all of your website pages at once.

Inside Squarespace, using a little CSS in appropriate places gives your website a more custom look, and it’s a handy way of getting around some limitations of the standard Squarespace menus.

Popular CSS tricks for Squarespace include setting different buttons to the same width, using two different font styles on one line, and hiding your website header and/or footer on individual pages.

Do you need to use CSS for a great looking Squarespace author website?

Absolutely not. As an author, you can publish a wonderful Squarespace website without using a single line of CSS.

However, as I mentioned above, it’s a nice option if you want to customize your design.

If you work with a professional Squarespace designer like me, there’s a good chance I’ll sprinkle a little CSS in, to either meet some of your requests, or for my own aesthetic satisfaction.

Lastly, in order to make a Squarespace website look good on a tablet, I do often find myself calling on some CSS code to adjust the layout so it looks pleasing.
Related: Squarespace problems I see, when you build your website yourself

I caution against using CSS in Squarespace where you don’t really need it!

For starters, it’s not supported by the Squarespace Help Team, so if you get in a mess, you’re on your own. (Rest assured, you can’t break your website using CSS, but it might end up not looking the way you wanted!)
And, occasionally, Squarespace changes something behind the scenes, which will cause your CSS to stop working. So if you do use CSS, make careful notes on what you used, where, and why. When you check your website for other snags, revisit the places where you are expecting CSS to take effect.

My favorite Squarespace CSS resources

I know of no better resource for Squarespace CSS than Becca Harpain’s work at Inside the Square. I wholeheartedly recommend that you start with this introductory guide. (To borrow one of Becca’s favorite phrases, I’m not affiliated, just a fan!)
And unless you want your CSS to apply everywhere on your website, you’ll need to learn how to target individual sections and/or blocks with their unique ID. This plugin is a lifesaver for identifying the IDs that you’ll need. (Same again, I’m not affiliated.)
Here is the Squarespace guide to using CSS.
Lastly, if CSS really grabs your enthusiasm, an excellent overall guide to the topic (way beyond using it in Squarespace) can be found at W3 Schools.

How to get started with CSS inside Squarespace

The first thing to know is that Squarespace likes to re-arrange menu options from time to time! If you’re following an online tutorial and can’t find your way to the correct window to paste in your CSS, don’t panic.
- While logged into your Squarespace website, press the forward slash key: / to bring up a small search window
- Type css in the search, and then choose Custom CSS
  - There are other places inside your Squarespace website where CSS can go, however, I think this is the easiest one for beginners to find and use
- Paste in the CSS snippets below and notice the difference they make. If you don’t like the result, just delete your CSS code.
This blog post is not intended to be a complete tutorial on using CSS in Squarespace. For that, Inside The Square is unbeatable - see above.
Because CSS is computer code, it needs to be precise. Parentheses versus brackets versus braces do matter, and so do semi-colons. I suggest you take it slowly, definitely download the guide suggested above, and have fun!

New CSS for Squarespace, that authors and writers will like

CSS specifications are defined and maintained by the World Wide Web Consortium. Earlier in 2024, these new options became available:

1. Manage “orphans” with pretty text-wrapping

(Not my choice of title! The CSS standard has indeed called this new feature “pretty”!)

When my clients see the first draft of their author website, many of them ask me about unattractive line breaks in headlines and other paragraphs of text.

I explain that a website screen can take many sizes, and we need to trust the browser to break the text in the place that makes most sense, given many other factors. As well as screen size, there might be accessibility preferences that the visitor has set. The comparison I make is to the paperback version of your book, where we know exactly where each line will break, and widows/orphans are quite rightly hunted down and minimized! On the other hand, for the ebook version of your book, we need to trust the Kindle device or iPad to do its best for the individual reader.

Until recently, we’ve had to accept we don’t have perfect control over line breaks on your website. Overall, trusting the browser to do its job is a great way to approach web pages…

But wait! As of 2024, a new CSS option aims to get a little more clever about how paragraph lines break and wrap.

The following snippet of CSS code should help to prevent orphans at the end of your paragraphs:

 p { text-wrap: pretty !important;}

And to target just one section of your Squarespace website, add the section ID (see the plugin I recommend above, to help you). Be sure to change the section ID so that it’s correct for your website; this won’t work otherwise:

section[data-section-id="660ad52c72b5207c6ea4a340"]
p { text-wrap: pretty !important;}

(I’m finding a few online sources noting that for now, this one might only be helpful for websites viewed in Chrome and Chromium. But I’m certainly keeping it up my sleeve for future client projects.)

2. Drop capitals

This one is pretty fancy! Here, we’re creating a Drop Cap effect with a different font style (serif), and also coloring the initial letter pink.

Again, since I doubt you want this for every paragraph on your website, this is an ideal scenario to target an individual section ID. Be sure to change the section ID so that it’s correct for your website (see the plugin above to help you):

section[data-section-id="660ad52c72b5207c6ea4a340"]{
    p {
  &::first-letter {
    initial-letter: 2 2;
    font-weight: 600;
    font-family: serif;
    padding-right: 0.5rem;
    color: pink;
  }
}
}

Summary

Once again, you really don’t need to use CSS for your Squarespace website, especially if you’re just getting started. However, there’s no denying that a few carefully chosen pieces of CSS can make a pleasing difference to the finished result.

Skills like these are why I’m confident I can create a more beautiful website than you, in a fraction of the time :)

•

Would you like me to design and build your Squarespace author website?

Prefer not to spend your time and energy navigating design issues like this? I have dozens more tricks like this up my sleeve.

As a professional specializing in strategic websites for authors and solopreneurs with books, I’m an expert in the features you need for a website that looks wonderful, connects with your audience, and gets business results. If you’d like niche expertise, top quality design, and your technical headaches solved, consider hiring me.

After careful preparation together, I’ll design, build and launch your site in just 2 weeks. Learn more, and then schedule our friendly intro call.

Website Strategy and Design