HTML and CSS Reference
Figure 4.7 The Google Chrome Developer Tools, which help us to inspect the HTML
and CSS on any page
The box model is one of the most confusing parts of learning how to write HTML and CSS.
It is also one of the most powerful parts of HTML and CSS, and once we have it mastered,
most everything else—like positioning content—will come to us fairly easily.
Let's jump back into our Styles Conference website to center it on the page and add some
1. Let's start by adjusting our box size to use the border-box version of the box
model, which will make sizing all of our elements much easier. Within our
main.css file, just below our reset, let's add a comment to identify the code for
what will become our grid and help determine the layout of our website. We're
putting this below our reset so that it falls in the proper position within the cascade.
From there, we can use the universal selector, * , along with universal pseudo-ele-
ments, *:before and *:after , to select every imaginable element and change
the box-sizing to border-box . Remember, we're going to want to include
the necessary vendor prefixes for the box-sizing property, as it is a relatively