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

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <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">
    <h1>CSS Color Markers</h1>
    <div class="container">
      <div class="marker red">
      <div class="marker green">
      <div class="marker blue">
/* file: styles.css */
h1 {
  text-align: center;

.container {
  background-color: rgb(255, 255, 255);
  padding: 10px 0;

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

/* User Editable Region */

.red {
  background-color: linear-gradient(to right,red,yellow);

/* User Editable Region */

.green {
  background-color: #007F00;

.blue {
  background-color: hsl(240, 100%, 50%);

Your browser information:

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

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

Link to the challenge:

Is this what the instructions asked you to do?

“In the .red CSS rule, change the background-color property to background.”

I would reset the step to get the original CSS back and then only do what the instructions ask. If you don’t understand something about the instructions then please ask a specific question about what you don’t understand.

So i keep puting it in like that and it gives me this
Sorry, your code does not pass. Keep trying.

Your .red CSS rule should have a background property with the value rgb(255, 0, 0).

and ive tried putting both in and neither of them are working even at the same time

You’ll need to paste in your updated CSS in here so that we can see what you did. Please use the following method to do that.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

Did you reset the step to get the original CSS back?

The only thing the instructions are asking you to do is replace background-color with background. You can do this by just deleting -color from what is already there. That’s it. You should not make any other changes.

Yea that was it i was just confused

1 Like

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