FREE SQUARESPACE TUTORIALS
Learn how to customize Squarespace with CSS
Welcome to my collection of free Squarespace css tutorial videos here InsideTheSquare!
Browse by category below, or search for exactly what you need.
BROWSE BY CATEGORY
- Tablet
- Version 7
- Version 7.1
- accordion
- alert
- align
- animation
- announcement bar
- archive
- audio
- background
- backgrounds
- blocks
- blog
- blur
- border
- borders
- button
- button styles
- buttons
- calendar
- caption
- cart
- chart
- checkout
- collection
- collection page
- color
- colors
- content
- cookie
- cookie alert
- countdown
- countdown timer
- course
- css
- custom
- date
- design
- desktop
- digital product
- divider
- donation
- donation block
- dropdown
- e-commerce
- elfsight
- embed
- event
- events
Brand new to custom CSS?
How to create creative image borders in Squarespace
This tutorial will show you how to create a unique collage image layout with a creatively placed border in Squarespace.
How to create arch shaped images in Squarespace
This tutorial will show you how to create an arch-shaped image with a creatively placed border in Squarespace.
How to create frosted glass effect for summary blocks in Squarespace
This tutorial will show you how to create a frosted glass effect over a blog summary in your Squarespace site - any version!
How to create frosted glass effect for a blog post grid in Squarespace 7.1
This tutorial will show you how to create a frosted glass effect over a blog post grid in your Squarespace 7.1 site.
How to create frosted glass effect for images in Squarespace
This tutorial will show you how to create a frosted glass hover effect for poster images in your Squarespace site
How to create rotating images with text in Squarespace
This tutorial will show you how to create a cool hover effect for poster images, flipping the image to reveal text on the “other side”
How to use two font styles in one line in Squarespace
This tutorial will teach you how to use some clever CSS to change the look of a specific part of a sentence using the bold and/or italic text types in Squarespace, any version!
How to create equal height blog summary blocks in Squarespace
This tutorial will teach you how to create equal height blog summary blocks in any version of Squarespace, 7 or 7.1
How use an image for your horizontal line in Squarespace
This tutorial will show you how to use an image for the horizontal line in any version of Squarespace, 7 or 7.1
How to change the word “sale” in Squarespace
This tutorial will show you how to change the sale product label into any text you want to display. This tutorial is for both versions of Squarespace - 7.1 and sites built on the Brine theme in version 7.
How to customize the dropdown menu background in Squarespace
This tutorial will show you how to change the look of the dropdown folder in your main site navigation. This tutorial cover codes for both 7.1 and 7 sites build with Brine.
How To Add a Time Zone To Events in Squarespace
This tutorial will show you how to add text to an events list so you can specify a time zone!
How to customize the audio player in Squarespace
This tutorial will show you what codes you can use to customize the audio player in Squarespace.
How to create simple price tables in Squarespace
Forget fancy plugins - you can DIY a pricing table with custom CSS! Check out this free Squarespace CSS tutorial to learn how.
How to create a split page layout in Squarespace
This tutorial will show you how to create a split section layout in a 7.1 Squarespace website, so an image will be on half of the screen while your content will be displayed on the other half.
How to use an image for a button background in Squarespace
This tutorial will show you how to use an image for a button background in Squarespace and works for both version 7 and 7.1
How to create a floating newsletter block in Squarespace
In this tutorial, you'll learn a popular layout trick where we use layering to create a newsletter block between two sections in Squarespace.
How to add a background image to the header in Squarespace
This tutorial will show you how to use an image as the background of your header in Squarespace 7.1 and older sites built with 7.0 on the Brine theme
How to create two columns of text in Squarespace
In this tutorial, I am going to show you how to create multiple columns of text in any version of Squarespace!
How to create a text shadow in Squarespace
In this tutorial, I am going to show you how to add a shadow to any text style in Squarespace with some clever CSS code!