From the course: CSS for Developers
Unlock this course with a free trial
Join today to access over 24,800 courses taught by industry experts.
It starts with the CSS box model - CSS Tutorial
From the course: CSS for Developers
It starts with the CSS box model
- [Instructor] The CSS box model is the foundation of layout on the web. The box model is the term used to describe the rules surrounding the physical properties of all HTML elements. Basically, you can think about it this way, every single element on your webpage is considered to be in a rectangular box. Images, text, forms, everything. And the properties of each box, it's width, height, border, margin, and padding. These define not only the size of an element, but also how it relates to the elements around it. I've put together a live code example, so if you want to follow along, you can open up the codespace, go to 02_01, and fire that up in the live server. And that's this box-model.html. I'm going to right click anywhere on the page, and click inspect to open up the developer tools. And I'm actually going to dock that on the right side here just to make this a little easier to see, there we go. So here, I can go through the entire DOM tree and access any element on the page. As I…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.