FREELessons: 10Length: 34 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Coloring Selections

The trick you’ll be learning in this lesson is very subtle, but it adds a lot to the user experience. In this video, you will learn how to change the highlight color of the text on your page when your users select it.

Relevant Links

2.5 Coloring Selections

Hello and welcome back. By default, whenever you highlight a section of text on a website, your text is going to turn white with a blue background and the shade of blue might vary a little bit depending on what browser you're using. But for the most part you're stuck with blue and white. Well in this lesson I wanna talk about how we can use CSS to change that. And we're gonna change that using the selection pseudo class in CSS. So you can find the URL for our starting pen in the course notes for this lesson. And once you open that up go ahead and click on Fork to create a new copy. With this new copy we'll jump into our CSS and get started. So we have an h1 at the top and then a serious of h3 followed by paragraphs. Pretty much the same HTML we've been using in the last couple of lessons. So let's jump into our CSS and let's skip a couple of lines. And let's point to our paragraph. If we want to change the background color of our text whenever we highlight it we need to use the selection pseudo class in CSS. And we can do that very simply by typing ::selection, and then inside parenthesis we can define our rule. So here all I really wanna do is to change the background color to a different color. Let's just change it to yellow. So when we do that, you'll notice that when we highlight, all of our paragraphs now are highlighted in yellow, instead of blue. And you'll notice another very interesting thing, is that our browser can tell what color the text needs to be based on what color the background is. You'll notice that our blue background on the default selections has white text behind it but when we highlight it with a yellow background, you'll see that our text stays black so it's still easy to read. Now, you can change the text color if you want to. If we go back into our rule here, we can change our color to white and then highlight it, and you'll see it becomes much more difficult to read. So if you don't like the default color of your texts whenever you highlight it, you can certainly change that. We're just gonna leave that at its default, so it will go back to black. So then we can have a little fun with this, and make it really stand out, by giving our h3s and h1s different selection colors. So if we point to our h3::selected, we can give it a background color of orange, and then for our h1s ones we'll use the selected pseudoclass again and give it, I'm sorry not selected should be selection. We'll use that selection pseudo class to give our background color for our h1s, if we can spell that right, a value of red. So now if I were to highlight the whole page, you'll see that each different element has a different highlight color. And that's how you can change the background color of your text whenever you select it using CSS. Thank you for watching and I'll see you in the next lesson.

Back to the top