How To Style Text That You Highlight With CSS

Okay so the other day I noticed on a website that when I selected some text, that the “highlight” was styled, the font color changed, the background color changed, and it really made the appeal of the website so much nicer. I never knew such a small thing would make such a difference to me, or stand out so much. Needless to say I dug right in and figured out how to do it.

Turns out, it is as simple as anything else with CSS! Great news, let’s take a look at the code.

The working CSS I use now is simply the declaration of

::selection { }

Then I simply applied a new color, and background-color.

::selection {
color: #ffffff;
background-color: #888888;

There it is! you’re all set. I would take the time to find a color that really looks good on your content and lets the user know that they’re highlighting something. Think bright yellow markers for example. The site I found this on used a BRIGHT pink that really rocked with their design.

Thanks for checking me out!

Peace out,