Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉 https://insidethesquare.co/learn
—
This tutorial was recorded in my 7.1 demo site but works for all versions of Squarespace.
—
In this free Squarespace tutorial, you’ll learn how to create an outlined text with an offset color using custom code!
We’ll be using an Heading 1 text type that codes by the code name H1, but you can use this same code for literally any text in your Squarespace site! All you need to do is change H1 to the code name (aka selector) of the text style you are working with. From H1 to P and all the other fun “code names” – anything text-based can work.
For those of you who have my CSS cheat sheet, check out the element name list on page 14 for a list of the different text types you can target in Squarespace.
And if you don’t have my CSS cheat sheet, what are you waiting for?! 😮 Head on over to https://insidethesquare.co/css and get the codes you need to make your website look awesome!
Here are the code examples from the tutorial.
Remember, to target the active link use the letter a (example: h1 a) and to add a hover effect, use the text :hover after the name of the text type you are targeting (example: h1 a:hover)
h1 {-webkit-text-stroke: 3px black;color: rgba(0,0,0,0)!important;text-shadow: 5px 5px 0px #50bdb8!important;font-size: 5rem;font-weight: 900;transition: color 2s, text-shadow 2s!important}
h1:hover {-webkit-text-stroke: 3px black;color: pink!important;text-shadow:none!important;transition: color 2s, text-shadow 2s}
Want to apply this code to a single block of text? Grab the block ID with this Chrome extension.
I am not affiliated with this extension or the people who created it, but I do use it in my own work:
https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde
Want to apply this text style on a single page in your Squarespace site? Check out this blog post to learn how:
https://insidethesquare.co/singlepage
—
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10
—
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
—
The term “Squarespace” is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥
—
#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips
