DEV Community

Cover image for CSS Battle: #1 - Simply Square
Jatin Sharma
Jatin Sharma

Posted on • Originally published at j471n.in

CSS Battle: #1 - Simply Square

In this article, I will solve a Simply Square CSS Challenge on CSS Battle. Let's look at the problem first.

Problem

We need to create the following container by using CSS Properties only:
Pilot Battle

Solution

So now look at the Solution and how we are going to achieve this.

HTML

First, create an HTML for this, I've used the two containers to do that. you can use Pseudo-classes as well.



<div class="box">
  <div></div>
</div>


Enter fullscreen mode Exit fullscreen mode

CSS

Now let's style the containers.



.box {
  width: 400px;
  height: 300px;
  background: #5d3a3a;
}


Enter fullscreen mode Exit fullscreen mode

After applying the CSS to .box it will look like this:

first

Now we style the child div of .box.



.box div {
  background: #b5e0ba;
  width: 200px;
  height: 200px;
}


Enter fullscreen mode Exit fullscreen mode

After applying the CSS, here's the result:

result

Now the problem is solved by simply the above styles.

Codepen

Alternate Solution

This is one more way you can do this even though there are many ways, I like the following:

HTML



<div></div>

Enter fullscreen mode Exit fullscreen mode




CSS




body{
background: #5d3a3a;
margin:0;

}
div {
width: 200px;
height: 200px;
background: #b5e0ba;
}

Enter fullscreen mode Exit fullscreen mode




Wrapping up

If you like this then don't forget to ❤️ it. And I'll see you in the next article. See you soon.

Top comments (3)

Collapse
 
codeystein profile image
codeyStein

That's a good solution, even though it might not be the most understandable, and pretty code, to have the least amount of characters I made a pseudo element from the background, so I didn't make a single div.

Collapse
 
gass profile image
Gass • Edited

This is a bit to simple for me, but if your battles improve in difficulty it will be interesting to keep reading them. The concept of this series is fun.

Collapse
 
chinchang profile image
Kushagra Gour

Nice solution! Thanks for sharing Jatin :)