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

Tell us what’s happening:
The code works but I don’t understand why… the class is named marker one. Why typing .one only works? it’s not named just ‘one’ it’s marker one.

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;
}
.one {
background-color: red;
}

/* User Editable Region */



/* User Editable Region */


Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/109.0

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

Link to the challenge:

This ‘div’ element has two classes: “marker” and “one”. The rule for adding two classes to an HTML element is: <element class="value1 value2"></element>

Oh, it’s 2 classes but what’s the difference between the marker class and the one class?

1 Like

With the ‘marker’ class you target a few div elements in css file, but with a class set to the value of ‘one’ you target just the div element with that class name. In short, you apply different styles to different elements this way.

Clears it up for me. Thank you.