From the course: CSS Shorts

Selection colors - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Selection colors

“

- [Instructor] Hi, this is Chris Converse, and in this episode, we'll customize the look of selected text in our web page, allowing us to control even more of the design as it relates to the user experience. So if you would like to follow along, download the exercise files and let's begin by opening the html file in a text editor. And once you have the html file open, in the body area you'll see I have an article element already set up. Inside of your article element is a h1 and h2 and a paragraph element. If you load the same page in a browser, you'll see the same layout looking like this. Now what we're going to be doing is changing the text selection colors. So if I come in here and click and drag to select some text, you'll notice this default browser color specifying the text I have selected. Now each browser will be a little bit different based on either the individual browser or the operating system settings, but what I want to do is change the color of the selected text using CSS to more closely match the design of our site. So let's go back to the exercise files. Let's find style.css. Let's open this in our text editor. I'll scroll down here a little bit to take a look at some of the rules. And what we're going to do is add a rule after the article rule. So after the article rule, let's hit a few returns. Then we'll type article, then a space. Then, just to demonstrate this, let's target the paragraph element inside of the article. Then we'll add two colons, so we can add a pseudo selector. Then type in the word selection. And we'll add in our brackets, And then inside we're going to set a background color. So background-color, and we're going to pick that pink color. So use hexadecimal, so pound sign, two Fs for red, 00 for green and de for blue, save your css. Then if we go back to the browser, come in here and click. We can now see that we've changed the background selection color. Now the text is still the same color. So in order to change that, let's come back to the css. After the background color, let's add a color property. So add a pound sign and three Fs. Add our semi-colon, save our css. go back to the browser again, click and drag, and now the selected text has a pink background as well as white text. Now since we specified the paragraph element, if I come up here and select more items, you'll notice here that the h1 and the h2 elements are now showing in the default browser color, and only the paragraph element shows in the properties we've changed. So in order to fix this, let's go back to our css, let's come in here and select the letter P. Let's delete that and replace it with an astrix. So what this does is it targets every element inside of the article. So at this point we'll hit Save. Go back to the browser, and now all of the text that we select will show in our new properties. And now at the time of this recording, we do need to use a browser flag for Firefox. So we'll come back to our css. Let's come in here and select this entire property. Let's copy it. Let's add a few returns. Let's paste it again. And what we're going to do is change the pseudo selector from selection to -moz-selection, and that will enable this feature in Firefox. And so now we have a more coordinated user experience within the browser to more closely match the design of our web page. And so with that, I'll conclude this episode, and as always, thanks for watching.

Contents