How to style selected text in Squarespace

Just in case my website didn’t give it away, I am all about using bright colors to show off my brand style.

From text to buttons and all the stock photos I can find, I prefer to keep it light bright and fun here InsideTheSquare.

One unexpected place I love to add a pop of color is selected text. Use your cursor to highlight art of this paragraph and you’ll see it in action!

It’s a fun way to take my designs a step further, making sure every element of a site I build is branded to perfection. And the best part? It is a super simple code snippet!

Using HEX color codes, you can change the font and the background of any selected text on your site.

I did a little code breakdown in this tutorial video so you can understand exactly what colors need to go where.

A quick heads up: Squarespace changes their program navigation all the time. Use the forward slash key to open the program search so you can find your CSS pannel, becuse it's probably different than the video. 😅 While step one might be outdated, the codes will work in any version: 7.0 and 7.1

Here is the main code that you can use to customize your selected text.

Changing the HEX code after "color:" will change what color the font is, and changing the HEX code after "background:" will change the background color that will show up behind the font!

Now no matter what style you go with the last step is the most important, select save when you are done!

::selection {
color:#FFFFFF;
background: #000000;
}

For the visual learners out there - here is a step by step tutorial so you can see how these codes work & how to customize them: