Web Development: A Beginners Guide— Lesson 6: The Box Model
The web is made of boxes.
The way a page is split up into divisions using the `<div`> tag is called the box model. The simple way to explain it is using the diagram below and this simple line: The div is a box and has content in the center of the box, surrounded by padding then a border, this is all surrounded by an invisible margin around the outside which pushes other nearby `<div>` tags away, creating space between them.
We will study this box model below the current content of the site and we will write our, now the file is getting a little large to keep pasting it all within the text here so instead I will link a codepen, which will show you both the code and the output.
In your html file add a `<div>` with a class attribute of `box`, a `<h2>` with and id of `first-title` and a `<p>` tag just below the last `<a>` tag
don’t forget to close your tags.
Now to explain what the `class` and `id` do is rather simple, they are CSS Selectors, which will allow us to choose specific HTML elements, as you saw earlier we can use an element as a selector but it will change all of the selected element, as with our example `p { color: #fff;}`,
a class allows us to choose all HTML Elements with the given class, so if we style this `.box` and then add another `<div class=’box’>` it will take the same stylings as the first `.box`.
As for `id` this will be a specific unique identifier, it allows you to select just that particular element.
As an example of the `class` and `id` selectors, try adding another box but without the `id` tag on the `<h2>` and you will see that it only affects the `<h2>` with the `id`.
Now that the HTML is typed out, we can add the CSS and see the result of the selectors we are using.
To select a `class` you type `.{className}` and for an `id` use `{id.name}`
In your CSS file.
This will cause the `.box` to have a fixed width of `150px` and height of `300px`, the background color will be a nice indigo color and it will have a black border, of `1px`.
Now to the important bit, the `padding` will mean there is `5px` of spacing between the content of the div and the border.
The `margin` will mean there is a `10px` gap between the `.box` and other nearby `div`’s.
Next lets work on the `id`.
Upon saving your `style.css` file and reloading the webpage you will see that the first boxes title has changed to yellow, is a thinner weight and is underlined, you should also notice it hasn’t affected the second title either.
You can be more specific with selectors to, for example lets say that we want to change the styles of the `<p>` tags but only within the `.box` class.
Try this
You can see the `<p>` tags within the boxes are now smaller, a lovely orange color and is in italics.
Being able to specify particular classes etc. becomes very useful.
In the next lesson we will take a look at organizing `div`s on a page and items within a `div`.
