Dear First name / creative,
If you've ever dabbled in code snippets for your CSS Editor on Squarespace, you'd know that the first step to applying custom code can be the trickiest bit: scoping. That is, clarifying which elements will be customized to your modifications at any given time.
Chances are you'd be falling down the rabbit hole that is the Inspector Tool searching for that one selector you need. There aren't a lot of third-party extensions that could help in this department either.
Finally I decided to take matters into my own hands and build the app I've always wanted to use—both as designer and developer.
This is how Squarestylist's very own Selector Helper came about. Simply put, it's a visually engaging Chrome extension that finds and displays key selectors you need from a single point and click. Optimized for Squarespace out of edit mode, this tool can highlight which blocks or sections on the page belong to any selector at a glance.
The accompanying tutorial is like a Squarespace CSS Crash Course where I walk you through:
- Understanding what CSS selectors are and how they work
- Identifying the right selector using our Selector Helper
- Creating simple CSS rules to customize your site
- Applying changes to specific sections vs. entire pages
