How To Style Selected Text with CSS

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. 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 weeks tutorial so you can understand exactly what colors need to go where.


The code used this week is as follows:

::selection {color:#FFFFFF; background: #50bdb8;}

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 ;)

Now I love my color scheme but I am curious - what style did you go with on your own Squarespace site? Let me know in the comments below, and be sure to subscribe for another free tutorial every week!