Paint Store lesson - HTML/CSS class selector inconsistency

#1

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:

https://www.codecademy.com/paths/learn-how-to-build-websites/tracks/intermediate-css-colors-and-typography/modules/learn-css-colors/projects/color-paint-store

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!

Best,
Nuno

#2

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 (.)

#3

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

#4

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

#5

Their is a class of reds and it’s color reds. Whitespace in a class name gives it multiple classes.
https://www.codecademy.com/forum_questions/506d1cacc968bc00020514ae

#6

That clears it up. Thanks!