New CSS Tricks for Your Squarespace Author Website
• This article contains affiliate links •
Firstly, if you’ve never heard of CSS and you’ve no idea whether you should use it to style your Squarespace author website, you should read my getting started guide.
And after that, please do come back here!
Just getting started with Squarespace? Save 10% off your first subscription of a website by using the code PAULINE10
I’m far from an expert in CSS, but every so often, my wonderful husband — who has his finger on the pulse of tech news — alerts me to something new that can make an author website look even more professional.
Recently (thanks, hubby!) he mentioned two new features.
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.
Without CSS: orphan at the end of the first paragraph
With CSS: the line breaks in the first paragraph avoid the orphan
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 that I recommend here, 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
Without the CSS: standard paragraph text
With CSS: hey presto, drop caps!
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 shouldn’t need to use CSS for your Squarespace author 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.