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

HTML-CSS
1

Tell us what’s happening:

My issue is that I am following the directions, looked up videos as a tutorial of how to type in the code…I have done it correctly according to my previous lines and the videos I have watched. It is still not going through. I do not know what is wrong at this point.

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 two">
      </div>
      <div class="marker three">
      </div>
    </div>
  </body>
</html>

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

/* User Editable Region */

 .container {background-color: rgb(0,0,0)}

/* User Editable Region */


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

.one {
  background-color: red;
}

.two {
  background-color: green;
}

.three {
  background-color: blue;
}

Your browser information:

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

Challenge Information:

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

2

Hello @choatesam.

There appears to be a space before your declaration of .container. Also, you should know that many of the validation checks have to do with checking that you enter the requested information the way that it expects it. For example see all those other classes, they start in the beginning of the line, then it breaks the curly brackets into different lines and at the end of each property if finishes with a closing semi-colon.
You entry might be “real world” accepted by the parser to validate you input might not account for every alternative. It is best to follow the other examples.

By the way, the first class h1 by now it is missing the closing ending bracket, as well.

3

Hi @choatesam ,
You are doing great.
I guess you mistaken removed the closing curly bracket of the h1 styling above this .container.
Put a closing curly bracket to close styling for h1 before your styling for '.container`

While the next point is not issue it is good for easy code reading:
To have below the element selector, the stylings on different lines
Also, ading a semicolon at the end of each line of styling is also cool. Makes the styling easy to read.

Let me know if it works.
:+1: happy coding.

4

Thank you. I had figured out the issue within 5 minutes after posting for help then completely forgot to reply to the thread…
I think I may have deleted the closing bracket when trying to figure out how to post only that portion of the code (this is my first post and didn’t know exactly what to do). When I went back to look at my code, the bracket was there and the problem was just a space before .container and I fixed the bracket bits to be vertical lists (I was doing that for the others but got fed up dealing with this line lol)

1 Like
5

Cool. Good to know you’re also doing great with your coding.

1 Like
6

Thank you. I really appreciate that.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.