How was this box creatd?

HTML/CSS
1

Hi friends! I am in part 2 of the HTML / CSS class. Mosh is covering padding and margins.

In thie video he writes the following html add some css and this box grets created, im unclear on how this box is being a created?

A div is a container right, how was this box created using the html?

Thank you!

<div class="box" >
2

The div is a generic container which by default is as tall as its content and as wide as its parent container (probably the body element in this case).

He added an attribute to this div name class and its value is “box”. This is just so he can target everything he assigns a class with the name “box” to in the css. Perhaps he ends up creating more than one box and can write only one css ruleset named .box to control all of them.

So now he has a generic div that we established is as wide as the body and has no content so it has no height. He then could write a css rule like this…

.box {
    width: 400px;
    height: 400px;
}

You don’t see the box because it has no color. So you can then add another rule to your ruleset…

.box {
    width: 400px;
    height: 400px;
    background: tomato;
}

Now you should see a box that is 400px x 400px and is the web color named tomato. This is your box

Hope this helps

1 Like
3

Just in case it isn’t apparent in my above post. Div and box are the same thing.

1 Like
4

A <div> is indeed a container in HTML that can be styled to appear as a box. By adding CSS properties like padding, margin, border, and background-color, you can visually create a box around the content inside the <div>. Think of it as wrapping a gift- the <div> is the paper, and CSS is what makes it look pretty! Dog likes best

1 Like