BETA: English suggestion for Basic CSS: Use a CSS Class to Style an Element

Challenge Name

Basic CSS: Use a CSS Class to Style an Element https://beta.freecodecamp.org/en/challenges/basic-css/use-a-css-class-to-style-an-element

Issue Description

1. It says:

“You can see that we’ve created a CSS class called blue-text within the <style> tag.”

Is it really created by referencing it in the style tag/CSS file? I thought creation happened in the HTML tag/HTML file? Or, does referencing it with CSS cause it to be added to the DOM?

If not, then it would be better to change the wording to

“we’ve referenced a…”

Given that you’ve also later called it a class declaration, I’m guessing that class creation occurs in an HTML tag, not in the CSS style rule.

1. It then says:

“Note that in your CSS style element, classes should start with a period. In your HTML elements’ class declarations, classes shouldn’t start with a period.”

Wouldn’t it be more helpful to explain that the “.” shows compiler that the following name is a class (as opposed to a tag or ID)? Like this:

“Note that in your CSS style element, classes should start with a period. This is because the period shows the compiler that the name that follows is a class rather than a tag (or ID). In your HTML elements’ class declarations, classes shouldn’t start with a period because you use ‘class=’.”

1. If there isn’t a challenge about multi-word class names, then you could also add a statement like this (or add a challenge):

"If your class name contains more than one word, you can write it without spaces: “myclassyname”, but it is recommended that you use capital letters to make the name easier to read: “myClassyName”.

Alternatively, you may add other characters, such as the hyphen: “my-classy-name” or the underscore: “my_classy_name”. If, however, you want spaces between those words, you’ll have to enclose the whole class name in single ‘my classy name’ or double “my classy name” quotation marks. This is especially important if you have multiple classes on a tag.

Example: HTML: <h2 class=" 'my classy name' blue-text boldText"> CSS:

 <style>
    ."my classy name" {...;}
    .blue-text {color:blue;}
    .boldText {font-weight:bold;}
 </style>

Multiple classes are separated by a space, hence the use of quotation marks. However, to reduce the risk of errors, we recommend that you don’t use spaces in class names."

Screenshot

[raisedadead]

Here is what we think this needs;

Point 1: I think wording it as declaration makes it less ambiguous.

“we’ve declared a…”

Point 2: Agreed, this rewording helps calrify. Point 3: I guess we should be having a separate challenge for this one.

[QuincyLarson]

I’m closing this issue as stale since it hasn’t been active lately. If you think this is still relevant to the newly updated platform, please explain why, then reopen it.