Learn CSS Colors by Building a Set of Colored Markers - Step 18

HTML-CSS
1

Tell us what’s happening:

It wants me to create a new CSSrule that targets the class one and set its background color to red, heres my code:

.marker one {background color: red;}

This is the response I get:

You should use a class selector to target the class one .

This is what I got off of one of the suggestions.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Markers</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>CSS Color Markers</h1>
    <div class="container">
      <div class="marker one">
      </div>
      <div class="marker">
      </div>
      <div class="marker">
      </div>
    </div>
  </body>
</html>

/* file: styles.css */
h1 {
  text-align: center;
}

.marker {
  width: 200px;
  height: 25px;
  margin: 10px auto;
}

/* User Editable Region */

 <.div class="marker one">
 .marker one{background-color: red;}

/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Challenge Information:

Learn CSS Colors by Building a Set of Colored Markers - Step 18

2

Hi @slipkid,

that’s not how to make a class selector.

here’s how to make a class selector:

.class-name {
  // your styles here...
}

Read more about Basic CSS Selectors - MDN

3

What about the second half?

4

what do you mean second half? please show me your updated code.

5

by second half II mean the color portion.

.class=“marker one”
.marker one{background-color: red;}

6

so, here is the direction right?

Then, create a new CSS rule that targets the class one and set its background-color property to red.

so, the direction tells to call your class one from you html file.

if you can remember, in css, there are different types of selectors. To call for a Class Selector, it should look something like this:

.image {
  // then your styles here...
}

then after calling the class, as the direction tells, you need to change the background-color to red.

Read more about Basic CSS Selectors - MDN

7

I’m sorry but I’m not understanding you.

8

that’s fine.

so, what I mean is to call for the class selector one, it’s just the same thing as you did on calling the class marker here:

If you still haven’t pass it, please show me your updated code.

9

Here’s what I have now so far:

.class=“marker one”
.marker one {
width: 200px;
height: 25[x;
margin: 10px auto;
background-color: red;}

Here’'s the response:

You should use a class selector to target the class one

10

remove the width, height, and margin except for the background-color.

remove this as well:

also remove the marker:

1 Like
11

That did it.

Thank you

1 Like