CSS FOR SQUARESPACE
custom code tutorials
step-by-step tutorials to help you customize your squarespace website design with code
How to customize the hyperlinks in your Squarespace text blocks
Transform boring default hyperlinks into eye-catching design elements with these 3 simple CSS tricks. Learn how to create custom-colored underlines, background highlights, and wavy effects that match your brand and enhance your Squarespace website's user experience.
How to create a countdown timer in Squarespace
Squarespace doesn't have a built-in countdown timer, but with this simple code snippet, you can add a fully customizable countdown to create urgency and excitement on your site!
How to customize your search bar & search results page in Squarespace
Transform your basic Squarespace search bar into a branded design element with simple CSS tricks. These custom codes make your website more professional and uniquely yours.
How to customize archive blocks
Learn how to add backgrounds, borders, custom fonts, and interactive hover effects to create eye-catching archives that match your brand. Step-by-step tutorial with copy-paste code examples!
How to Customize Individual Elements in Squarespace 7.1
In this blog post, you'll learn how to customize individual elements on your Squarespace website using CSS, no matter what plan you're on.
How to Customize Squarespace Buttons: The Ultimate Guide for 2025
Learn how to transform your Squarespace buttons using site styles and custom CSS. From basic design tweaks to advanced hover effects, master button customization today!
How to add an H5 & h6 text type to Squarespace (and how to customize it with code!)
Add H5 and H6 headings to your Squarespace site using markdown or code blocks, plus learn how to customize their appearance with CSS for perfect typography hierarchy.
How to use a custom font in Squarespace
Transform your Squarespace website with custom fonts using three powerful methods: a secret font menu trick, Google Fonts integration, and custom font files. Learn professional implementation strategies for unique typography that matches your brand.
How to customize the chart block in Squarespace
In this tutorial, you’ll learn how to create custom borders and backgrounds for a chart block in Squarespace.
How To Create A Text Popup in Squarespace
Showing additional info in a popup is a great way to give visitors more information without cluttering your page. It's also an effective way to make sure your user experience is as smooth as possible. But did you know that you can create custom text-only popup using CSS?
How to Use Your Own Icon for the Accordion Block in Squarespace
In this tutorial, you’ll learn how to use your own custom icons for the accordion block in Squarespace, both the open & closed states.
How to hide one content block on mobile or desktop
Learn how to hide any Squarespace content block on mobile devices (or desktop!) with a simple code snippet.
How to add an image inline with text in Squarespace
This tutorial will show you how to use a markdown block to place an image in a line of text in a Squarespace website.
How to create image overlay hover effects for Squarespace
Learn how to create custom hover effects for your Squarespace image blocks in this free code tutorial from InsideTheSquare.
How to use two font styles in the same line of text in Squarespace
Learn how to combine multiple font styles within one line of text on Squarespace.
How to create a drop cap letter in Squarespace
A drop cap character is the first letter of a block of text that is larger than the rest, designed to elevate the style of your website content. It's easy to create in Squarespace with a little custom code, and that's exactly what you'll learn how to do in this tutorial!
How to change read more link text on a Squarespace summary blocks
Change the automatic text link for a summary block with the codes from this tutorial!
How to customize the quote block in Squarespace
Learn how to modify colors and fonts in Squarespace quote blocks using CSS. Go beyond default options to create unique, eye-catching quotes that match your brand.
How to customize the newsletter block in Squarespace
Learn how to transform your Squarespace newsletter block with code. You'll be able to update fonts, colors and more with the codes from this tutorial.
How to customize a horizontal line in Squarespace
In this Squarespace tutorial, you’ll learn different ways to enhance your line block, including adding a shadow, changing its height, creating a double line, and even creating a dotted line using custom CSS.