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 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
}

A few more things I want to mention before you give this code a try….

→ If you want to apply this code to a single block of text, gab the block ID with this free Chrome extension. I am not affiliated with this extension or the people who created it, but I do use it in my own work:

→ If you don’t want to use this style on your entire site, this blog post will teach you how to install code on a single page in Squarespace.