HTML CSS color within border

Question

I am trying to make a small yellow square of 300x300 pixels let's say with a black border. I use:

<style>
body  {
  background-color: yellow;
  border: 1px solid #000000;
  width: 300px;
  height: 300px;
}
</style>

But this gives the whole page yellow and not just the square... How can I fix this? Ty

because you're styling your whole body. Make a div and style that with above properties. Where is your html? — Sachin, Mar 01 '17 at 13:25
You are styling the whole `body` in other word the whole page — Oke Tega, Mar 01 '17 at 13:26
Possible duplication of http://stackoverflow.com/questions/11226126/how-can-i-create-a-small-color-box-using-html-and-css/11226586 — Lini Susan V, Mar 01 '17 at 13:26
The question is relevant. I'm using a third-party library, it has an iframe, that's where the body needs to be fixed. I am unable to add a div. — ArkadiBernov, Nov 07 '22 at 07:40

score 1 · Answer 1 · answered Mar 01 '17 at 13:27

The body tag selects the entire body of the html document. You need to give your box a id or class and then apply the CSS to that.

For example:

#box  {
  background-color: yellow;
  border: 1px solid #000000;
  width: 300px;
  height: 300px;
}

<div id="box"></div>

score 1 · Answer 2 · answered Mar 01 '17 at 13:27

1

You've applied to the body, that basically means the whole page. Insert a DIV on the body.

HTML

<div class="div-class"></div>

CSS

.div-class{
  background-color: yellow;
  border: 1px solid #000000;
  width: 300px;
  height: 300px;
}

answered Mar 01 '17 at 13:27

score 1 · Answer 3 · answered Mar 01 '17 at 13:28

If you want only a square of 300x300 you need to make a div for that

**HTML:**
<div class='square'></div>


**CSS**

.square  {
background-color: yellow;
border: 1px solid #000000;
width: 300px;
height: 300px;
}

Now you are applying your style to the body (whole page). That's why your whole window is yellow instead of 300x300

score 0 · Answer 4 · answered Mar 01 '17 at 13:27

0

You need to apply the styles to a div and not to the entire body...

.square {
  background-color: yellow;
  border: 1px solid #000000;
  width: 300px;
  height: 300px;
}

<div class="square"></div>

answered Mar 01 '17 at 13:27

Renzo Calla

score -1 · Answer 5 · answered Mar 01 '17 at 13:27

-1

Don't use "body", use "div"

div  {
  background-color: yellow;
  border: 1px solid #000000;
  width: 300px;
  height: 300px;
}

answered Mar 01 '17 at 13:27

Theo Orphanos

5 Answers5