Can You Box This, Please?

Hello again!

We have started boxing in class. Not with each other though.

Introducing the CSS Box Model. Ta ta!

For those who don’t know or didn’t until now, here’s a summary of what I mean.

All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. Read more here!

This is what it looks like in a nutshell. I will be adding images from the boxing class later.

boxmodel-image

Task:

  1. Create a CSS class named box with a certain set of rules
  2. Open in HTML
  3. “Mess with the values” and see how it effects the output
  4. I also inserted a paragraph and made one box round (changing the border-radius), is it still called box then? Yup!

Learning Outcome:

  • Elements that make the Box Model
  • Understand the display properties
  • Demonstrating how to achieve different layouts

Result: Yes, I can box this!

A collection of my boxes… 🙂

My Box Models
My Box Models

The purple box would change the colour to purple and its shape from the turquoise circle above, when hovering over with the mouse. #notaveryprettypicture

Boxes with different colours

Check the back-end, my box HTML code below.

HTML code
coding
Advertisements