Topics - Video Tutorials & Practice Problems

<v ->The last half of Lesson 7</v> looked at how to define sizes in CSS. In Lesson 8, we'll take those values and look at how to use them to understand one of the most important concepts in CSS, the Box Model. When rendering and styling HTML, the browser considers a page to be a collection of different boxes that contain content. Along with height and width, boxes can be styled to have borders, meaning a line around the box, margins, how far one box is from another, and padding, empty space inside the box separating content from the border. The CSS Box Model is the collective name for all the rules that determine how height, width, margin, padding, and borders are applied to elements and how those elements then interact with everything else on the page. We aren't gonna lie, elements of the Box Model can be quite confusing for people who are learning CSS. There are weird interactions between elements, counter-intuitive applications of styles, and ways of writing style values that can look strange at first glance. This lesson will give you the tools that you need to navigate these stormy seas. We'll learn a variety of ways to style elements, learn a couple methods for getting boxes to sit next to each other, and use our new understanding of how the browser renders elements to create the foundation for the layout that'll eventually be our full website.