Learn the CSS Box Model by Building a Rothko Painting - Step 20

HTML-CSS
1

Tell us what’s happening:
I would like to know which step i done wrong or any code I have mistyped . Thanks
Your code so far

/* file: styles.css */
.canvas {
  width: 500px;
  height: 600px;
  background-color: #4d0f00;
}

.frame {
  border: 50px solid black;
  width: 500px;
  padding: 50px;
  margin: 20px auto;
}

.one {
  width: 425px;
  height: 150px;
  background-color: #efb762;

/* User Editable Region */

.one{
  margin: 20px auto;
}

/* User Editable Region */

}

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Rothko Painting</title>
    <link href="./styles.css" rel="stylesheet">
  </head>
  <body>
    <div class="frame">
      <div class="canvas">
        <div class="one"></div>
      </div>
    </div>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.4 Safari/605.1.15

Challenge: Learn the CSS Box Model by Building a Rothko Painting - Step 20

Link to the challenge:

2

Hello!

It appears that a new .one selector was made. There is not any need for the selector. It is already in the selector at the beginning.
Only the margin and necessary information should be entered into the space.
I hope this helps you. Happy coding!

3

Very much appreciated !! May I ask for an extra question, how will the CSS respond to two same selector as you’ve mentioned above? Would the browser disregard the second one? Or it will just not be working?

4

If you have two classes, two elements, two ids, etc with the same name that style the same thing then the class that comes last will be the one applied. For example

.colorClass{
 color:red;
}

.colorClass{
 color: green
}

both classes are the same, and both are trying to change the color. So here since the color green comes last then the color will be green. Its the CSS order of precedence

in your case because margin was never mentioned in your top class then the margin will still apply in the browser that you set in the second class. If you did set a margin in the first class then it would be overridden by the margin in the second class

2 Likes
5

Much Appreciated! Truly understood

6

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