Size and color don't appear in section

Hi!
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:

html

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

css:
.squarecolor{
height: 150px;
width: 150px;
background-color: yellow; }
.colorone{
background-color: #9a3207; }
.colortwo{
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.
Thanks

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 :

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

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

section{
  display: inline-flex;
  gap: 10px;
}
.color{
height: 150px;
width: 150px;

}

.color.one{
background-color: yellow;

}
.color.two{
background-color: red; 
}
.color.three{
background-color: blue; 
}

.color.four{
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 !