Getting Started with CSS for Your Squarespace Author Website
• This article contains affiliate links •
(I previously included this information inside another blog post, however, I’ve since realized that I’ll want to reference it in future. So I’m making this mini introduction to CSS as a stand-alone page, so that it’s more convenient.)
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.
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 a few limitations of the standard Squarespace design features.
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 for your author website, 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.)
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.
Tips for your first CSS attempts for your Squarespace author website
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 your CSS snippets and notice the difference they make.
If you don’t like the result, just delete your CSS code.
Although I use CSS in Squarespace myself, and I may share snippets occasionally, I’m not an expert and I don’t teach it. 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!
•
Want to give Squarespace a try? Save 10% off your first subscription of a Squarespace website by using the code PAULINE10
•
Would you like me to design and build your Squarespace website?
Prefer not to spend your time and energy navigating design issues like this? 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 delights 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 (usually) just 2 weeks. Learn more, and then schedule a complimentary consultation.
