Size and color don't appear in section

I’m having this problem while doing the project “my web site style guide”, I need to create 4 squares, same size but different color, one next to each other. I thought about using the code below, because I wanted to set the size one time and only put color in each one:


<section class="squarecolor">
            <div class="colorone"></div>
            <div class="colortwo"></div>
            <div class="color3"></div>
            <div class="color4"></div>

height: 150px;
width: 150px;
background-color: yellow; }
background-color: #9a3207; }
background-color: green; }
The problem is that either the color nor the seize appear with the .squarecolor, but if I put seize and color in colorone or colortwo, it appear. I prefer to nor repeat the size 4 times, but I don’t know how to fix it.
If you know, I would appreciate your help.

Hi, so I guess the result of your code is just a yellow square. This is because your section is actually the parent element, so using .squarecolor to define the size will only affect this section. So I thing the best way to operate here will be to have your section like so :

            <div class="color one"></div>
            <div class="color two"></div>
            <div class="color three"></div>
            <div class="color four"></div>

And using the .color class to define the size of your boxes, which you have to do only once, then using both classes : to give it a color and so on.
Here is how I would write the CSS :

  display: inline-flex;
  gap: 10px;
height: 150px;
width: 150px;

background-color: yellow;

background-color: red; 
background-color: blue; 

background-color: teal; 

Just try it out and let me know if that works for you.

1 Like

Thanks! It really help me understand what to fix.

1 Like

No worries, happy coding !