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

HTML-CSS
1

Tell us what’s happening:

Step 49
You’ve learned a few ways to set flat colors in CSS, but you can also use a color transition, or gradient, on an element.

A gradient is when one color transitions into another. The CSS linear-gradient function lets you control the direction of the transition along a line, and which colors are used.

One thing to remember is that the linear-gradient function actually creates an image element, and is usually paired with the background property which can accept an image as a value.

In the

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 red">
      </div>
      <div class="marker green">
      </div>
      <div class="marker blue">
      </div>
    </div>
  </body>
</html>

/* 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: rgb(255, 0, 0);
}

/* 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/126.0.0.0 Safari/537.36 Edg/126.0.0.0

Challenge Information:

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

2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

3

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

4

Please describe what difficulty you are having with the instructions and error message in your own words.

5

i right right code but still show errors

6

Hi @humeshdeshmukh0

So the forum can assist please post your full code.

Use the following method to post code to the forum:

  1. On a separate line type three back ticks.
  2. On a separate line paste your code.
  3. On the last line type three back ticks. Here is a single back tick `

Happy coding

7

change the background-color property to background

8

You code isn’t right, so it isn’t passing.

9

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