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.
- Create a CSS class named box with a certain set of rules
- Open in HTML
- “Mess with the values” and see how it effects the output
- I also inserted a paragraph and made one box round (changing the border-radius), is it still called box then? Yup!
- 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… 🙂
The purple box would change the colour to purple and its shape from the turquoise circle above, when hovering over with the mouse. #notaveryprettypicture
Check the back-end, my box HTML code below.