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

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

  **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;
}

.red {
background-color: rgb(255, 0, 0);
}

.green {
background-color: hex#00FF00;
}

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

  **Your browser information:**

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

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

Link to the challenge:

1 Like

hi there, sorry to hear you are feeling lost.

Let me attempt some explanation but you may need to be more specific with your next question if my attempt doesn’t help you much.

In this exercise you are given some CSS code as follows:

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

This CSS will select any HTML element that has the class ‘green’ and will attempt to change its background-color to the value of rgb(0,0,0).
In computers, colours are created by combining different amounts of red, green and blue in order to trick our eyes into seeing different hues. (for eg. if you set red to 50 and green to 50 and blue to 50, then you will get gray)

Understanding this first, we can now move on to something else. Which is another way to set colour in CSS. This new way is using a counting system which is not based in the decimal counting system you and I use (usually we use the decimals 0, 1, 2, 3, 4 etc to count)
Hexadecimal is a different counting system and it works like this:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

Notice that in the decimal system we have 10 unique digits but in the hexadecimal system, we have 16 unique digits.

This exercise is trying to make you aware of this new method of communicating numbers with the computer (or to be specific, the browser).
This is in case you ever see a series of these hex decimals, you may recognize them.

And to be more specific, the colors that the browser can render may also accept them so let’s say I want my browser to show the color gray again.
I could write the CSS to say rgb(50,50,50)
or I could write it like this
background-color: #323232

So referring back to the exercise instructions, what do you think you need to do to complete it?

1 Like

i think i only need to put the color property without adding the ‘‘hex’’ i put. i’ll remove it :smiley:

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