Paint Store lesson - HTML/CSS class selector inconsistency

Hi all!

I’m following the course on how to build a website and currently doing the CSS lesson on colors and have a question that’s been frustrating me in the “Paint Store” exercise:

In step 6, the span selectors are being chosen using the .reds .base-color selector in CSS. However, in HTML, there is no “reds” class. The same holds true for the other colors (blues and greens). In HTML, these divs have a class of class=“color reds”, but in CSS, they are simply referred to as .reds.

Why does the CSS code work, and why is it coded using a class that is not defined in HTML?

Hope you guys can help me out with this nagging doubt!


in css, to select an element we do:

div {

in css to select a class we do:

.className {

to select an id we do:

#idName {

by using the prefixes (. for class and # for id), css knows what the selector is for

so where in html we have a class keyword, in css this is represented with a full stop (.)

I understand that. My point was that there is no class named “reds” in HTML, although CSS refers to one.

html and css are very error resistant, if there is a class in css while not used in html, the class simply never gets applied

Their is a class of reds and it’s color reds. Whitespace in a class name gives it multiple classes.

That clears it up. Thanks!