Why do websites use boxes?
Remember when you learned about how HTML elements are like boxes that stack inside each other? That’s really important to remember when you start making things with CSS.
When you’re looking at HTML, sometimes it helps to think of it like a family tree. All the boxes are related to each other in some way. When a box sits inside another box, it’s the child of that box. If there are multiple boxes inside of that first box, those inside boxes are siblings to each other.
How do I find the right box?
When you want to change something using CSS, you need to make sure you’re selecting the right boxes, or HTML elements. Knowing the relationship between these elements can help you figure out the best selector to you.
If you wrote a rule like this:
Your website would look like this:
There are ways you can make your selectors more specific by using IDs and classes, but we’ll get to those later.
Are you ready to learn?
This HTML has a lot of boxes. Somebody swiped all the selectors, so we need your help to put them all back and make the output match this image.
All the CSS rules are already written, but they’re missing the selectors. Each one just has the name SELECTOR instead.
Test out different selectors and see what happens and how it styles your code. Keep trying until you get it to match.
