Does a CSS class name have to contain both words used in HTML element attribute?

Hi there, I’m doing the Learn CSS: Colors module in the full stack areer path. Inside that module there is a project called Paint Store where aa a task I must find a specific class name in the HTML doc so that I can modify it in the CSS doc.

The element i need to edit is: <span class="base-color> but sits within a div element called


However inside the CSS doc the class appears only as:
.‘reds . base-color’

Is it actually possible to omit the first word of a class in the CSS stylesheet and for it to work as normal, or was this done just to make the code easier to read rather than for it to edit class?

I have to ask because I have not seen this done before on code academy. Thanks!

So, it took me 23 minutes to write out the question and only 1 minute to try it out and get the answer for myself using my Code academy workspace.

It turns out, you don’t have to use the full name of a class if it has multiple words in it,
in fact it’s not even possible to use multiple words for a class name in a CSS style sheet if it has spaces between them,

If you want to use multiple words as a class name inside the CSS document, they have to have hyphens between them in both the CSS doc and the HTML doc.

1 Like

I’m glad you figured it out! Thank you for sharing your findings with the community :grinning:

1 Like