# CSS Battle: #1 - Simply Square

In this article, I will solve a [Simply Square](https://cssbattle.dev/play/1) CSS Challenge on [CSS Battle](https://cssbattle.dev/). Let's look at the [problem](https://cssbattle.dev/play/1) first.

## Problem 

We need to create the following container by using CSS Properties only:
![Simply Square](https://cssbattle.dev/targets/1.png)

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) as well.

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


### CSS

Now let's style the containers. 

```css
.box {
  width: 400px;
  height: 300px;
  background: #5d3a3a;
}
```
After applying the CSS to `.box` it will look like this: 

![first](https://imgur.com/H2t0ugm.png)

Now we style the child `div` of `.box`.

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

After applying the CSS, here's the result: 

![result](https://imgur.com/IyYXGkR.png)

Now the problem is solved by simply the above styles.


**Codepen**

%[https://codepen.io/j471n/pen/oNWbJbX]

## Alternate Solution 

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

### HTML
```html
<div></div>
```

### CSS
```css

body{
  background: #5d3a3a;
  margin:0;
  
}
div {
  width: 200px;
  height: 200px;
  background: #b5e0ba;
}
```

## Wrapping up

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