This is Squarespace Styling With CSS Cheat Sheet by Applet Studio! Below you will find an intro into all things CSS and how it plays into Squarespace, plus a selection of useful CSS code snippets to help you extend the default capabilities of Squarespace - scroll to the end of this document to find those. Let’s get started!
<aside> ✅ TL;DR; Looking for useful ready-to-use and extensively explained CSS code snippets tailored to Squarespace specifically? Scroll to the bottom of this document ⬇️
</aside>
<aside> <img src="/icons/exclamation-mark_orange.svg" alt="/icons/exclamation-mark_orange.svg" width="40px" /> Want to learn even more? Join our Squarespace CSS Mastery class now!
</aside>
<aside> 📖 Document Table of Contents
</aside>
CSS is an acronym standing for Cascading Style Sheets. It is not a programming language, but in basic terms is a set of rules, explaining how people can tell computers (website browsers in particular) how to display things.
You could say that the modern web stands on 3 great pillars - HTML, CSS and JavaScript. Since understanding CSS outside of having some basic understanding of HTML is virtually impossible, let’s have a very, very brief look at both.
HTML is another acronym that stands for “Hyper Text Markup Language” and JavaScript doesn’t really stand for anything, it’s just a programming language name.
HTML is used to structure a web page - to tell browsers what is an image and what is text, what graphic should follow what other element, where a browser should render a piece of text as a paragraph, and where that text should be treated as a headline. Structuring things not only helps define the layout of a web page but also serves multiple other functions - for instance, with accessibility - screen readers rely on HTML to tell them where a piece of text is bold and where it is italicized, where one paragraph begins and where another one ends. Basically not using HTML would be like trying to write with no spaces, punctuation or capital letters. Reading that would be quite challenging.
CSS comes in when we need to style the structure we obtained with HTML. Want a block of content to float differently or to have a different background color? Maybe you want all your paragraphs to be rendered using the Helvetica font and not the default Open Sans font? Maybe you want your boring text links to appear as buttons. And while you’re at it, to also render pretty animations - like show shadows behind those buttons when someone hovers a mouse pointer over one?
CSS is there to tell browsers what you want to style, where and how.
JavaScript is used on the web to “do things”. So far HTML and CSS can get you to “show things”, maybe render some basic animations and transitions, the pretty stuff. But if you want to have something like a mortgage calculator on your website, you will almost certainly need to write its code in JavaScript and then embed that on a page of your website. JavaScript is also how many Squarespace plugins are deployed to Squarespace websites - but we’ll get to that later.