In the last lesson we used an asterisk to choose the background color to be applied to the whole page. Normally, we would want to choose something specific to apply our styling to. It’s the selector. You can choose something by its element name, such as body, header, h1, p, a, etc. That would look like this.

p {font-size: 1rem;}

Actually, you would normally write it like this.

p {

font-size: 1rem;

font: Times;

}

Remember that spacing your code doesn’t affect the code. There would most often be a list of styles for each selector.

You can also use classes and ids to select an element from your HTML.

#Macedonia {

background-color: black;

}

The background color of whatever is labeled with the ID of Macedonia on the HTML page would be black. If the ID is on a DIV, then everything in the div would have black as its background color.

.countries {

color: red;

}

The font color of everything labeled with a class of countries would be red. Every HTML element with a class of countries would have red for its font color.

You label an HTML element with an ID with id=”identification” and with a class, using class=”classified”. Make sure to use an equals sign and quotation marks.

Play around with selectors on your Lesson 9 style file.

Here’s the video lesson.