Practicing with simple selectors

- [Instructor] Let's do a small exercise to get some practice with selectors, using an online tool called JSFiddle. This tool is useful for testing smaller snippets of code. Go to the following URL to follow along with the example. If you'd like to keep your own copy, select Fork. This will generate a unique URL that you can save as your own copy, or create an account to save it to your own profile. Once you have this example open and ready to go, let's go through the steps in the HTML comments.

In JSFiddle, the HTML is in the panel on the left and we write our CSS in this top right panel. Number one, let's add a color to the body element. Let's start with Body as our selector and then add the left and right curly braces to open our declaration block. Use the color property, colon, and add any keyword color. Any common color should work. Let's go with green. End it with a semicolon to indicate that the instruction is complete.

Select Run to see the styles. By adding the color to the body tag, all of the nested elements also applies that color. Let's try adding a different color for only the H1 elements. To do so, we'll use H1 as our selector. Give it a different color and run the code. Now that we've used a more specific selector for the H1, the orange color applies to the H1 and all other elements are still green.

Notice that this subheading down here at the bottom hasn't changed color, and if we look in the HTML, that's because it's in an H2 tag, and we haven't specified it yet in the CSS. Now let's try adding a class to at least two elements and choose a new color. Remember, when we use classes, it doesn't matter which element we apply this attribute to. So, I'm going to add one to this heading here, and I'm just going to give it a generic name, Demo, for this example.

Add it to the CSS block. Remember, for classes, to select it, we have to start with a leading period, and then the class name, and let's make sure we choose a different color. Haven't used blue yet, so let's try that out. And run it to see the code. So now, by adding the class to this H1, we can apply the color to specific elements. Let's try adding this same class to another element.

I'm going to put it in this paragraph and run the code again, and there you go. Classes are a great way of reusing styles, especially if you want to reuse styles in different types of elements. And finally, let's try adding an ID. Just like classes, it's included in the opening HTML tag. Because ID and classes are different attributes, I can even use the same value name, because in the CSS, they use different selectors.

For IDs, we start with a number sign, and then the value name. Let's give this a color of red, and run the code. To summarize, type selectors allow us to add general styles to any HTML element, and class and ID selectors gives us a way to target specific elements. We'll be discussing more ways to select elements based on different factors in the upcoming lessons.