A Round-Up of My Favorite CSS Tutorials for Squarespace

CSS helps you customize and style your website beyond Squarespace's Style Editor. 

Although CSS can be complicated, Squarespace makes using CSS really simple by having a segment specifically for custom CSS, called Custom CSS. Sounds simple enough, huh? 

In this post, I rounded-up 12 tutorials I love to reference and have even used for my own website. Each tutorial helps you customize a unique element of your Squarespace site. From customizing text, to improving your call-to-actions... you're destined to find a tutorial you'll love.

A Round-Up of My Favorite CSS Tutorials for Squarespace | CSS Tutorials for Squarespace users hoping to highlight their brand and business. Find all 12 tutorials at www.jordanprindledesigns.com #squarespace #css #webdesigntips #webdesigninspiration

 

1 | Beginner's Guide to CSS

I recently wrote an article sharing the beginner's guide to CSS for Squarespace users. Whether you've worked with CSS for years or have never heard of it before, this blog post has you covered. Plus, it comes with a free cheat sheet to help get you started!

Get the guide: A Beginner's Guide to CSS

 

2 | Add Additional Text Options

If you want to further style your fonts or even add a color to one of your fonts, adding an extra header is a great way to do this. My Billie Designs created a blog post that details a few CSS tricks, one of them being how to add extra headers for more font styling options (H4)

Follow the tutorial: How to Add Extra Headers for More Font Styling Options (H4)

 

3 | Create an Accordion Dropdown Menu

Forth and Create wrote an amazing blog post walking you step-by-step through adding an accordion dropdown to your website. I followed this tutorial for my brand packages and added it to the "Work with JPD" page. See it in action, below:

Follow the tutorial: Squarespace DIY - How to Create an Accordion Menu

 

4 | Add a "Tweet This" Quote

Twitter is a great resource for bloggers and if you want to get your audience involved in sharing your blog posts, adding a "Tweet This" quote is the perfect way. Kreanille Design wrote a blog post highlighting 3 different ways you can add a "Tweet This" quote to your Squarespace blog. 

Follow the tutorial: 3 Ways to Have a ‘Tweet This’ Quote on Your Squarespace Website

 

5 | Customize Your Read More Links

In Squarespace, a read more link appears at the bottom of every blog post excerpt. Unfortunately, you have minimal control over how these read more links appear. Luckily, Megan Minns wrote a blog post detailing how you can customize your read more link in Squarespace.

Follow the tutorial: How to Customize the Read More Link on Squarespace Blog Post Excerpts

 

6 | Add Alternating Background Colors

As shown on the homepage of my website, you can easily add alternating background colors to any section of your Squarespace website with a little CSS and Index pages. 

Follow the tutorial: Add Background Colors

A Round-Up of My Favorite CSS Tutorial for Squarespace | CSS colored backgrounds with Jordan Prindle Designs

 

7 | Customize the horizontal line block

The horizontal line block is a great tool for breaking up content and improving legibility. Unfortunately, it comes with limited customization. However, a little bit of CSS can help you customize the line color, margin, height and more.

Follow the tutorial: Line Block Style

 

8 | Customize the Announcement Bar

At the top of every Squarespace site, you have the option to include an announcement bar. This announcement bar can promote a product, opt-in or sale. To make it even more unique and on-brand, My Billie Designs wrote a blog post sharing two fun ways to customize your announcement bar. 

Follow the tutorial: 2 Fun Ways To Customize Your Announcement Bar In Squarespace

 

9 | Style your Cookie Banner

With the recent GDPR-craze, the cookie banner has become more important than ever for your website. To make your cookie banner a little more attractive and on-brand, you'll need some CSS. I followed Kerstin Martin's blog post to style by cookie banner. 

Follow the tutorial: How to Style the Cookie Banner in Squarespace

A Round-Up of My Favorite CSS Tutorial for Squarespace | CSS EU cookie banner with Jordan Prindle Designs

 

10 | Add a Custom Pin-It Button

Similar to Twitter, Pinterest is a must-have for bloggers. But, if you don't want to use the standard Squarespace Pin-It buttons, you can easily create your own and add them to Squarespace with a little CSS.

Follow the tutorial: How to Add a Custom Pin-It Button to Squarespace

 

11 | Brand Your Quotes

If you use a lot of quote blocks for your website, you may want to consider branding it's appearance. A few fun ways to brand your quotes is to add backgrounds or borders to your quote blocks. 

Follow the tutorial: Add A Branded Background + Border To Your Quoted Text

 

12 | Add a Second Navigation Menu

If you've found the perfect template for your business and later discovered you needed a second navigation menu, don't panic. With a little CSS you can add a second navigation menu without having to change your Squarespace template!

Follow the tutorial: How to Add a Second Navigation Menu


Which tutorial are you most excited to follow? Let me know in the comments!