Understanding how the browser displays HTML elements is an important part of understanding how to create page layouts in CSS. This video provides a review of the CSS box model.
- [Instructor] In part one of this series,…we looked at the relationship…between the box model properties.…Let's do a review.…The box model describes the way CSS handles…the sizing and spacing of HTML elements.…There are five properties that make up the box model,…which are width, height, padding, border, and margin.…Width and height are used to add…specific heights and widths to your page components.…You can also a min or max width and height…to set the minimum or maximum values…to make your components flexible,…but still adhere to a specific size.…
We'll talk about this in more detail in an upcoming lesson.…The padding property adds space inside of an element…or removes default padding by setting it to zero.…It only accepts positive numerical values…and can be written using longhand or shorthand syntax.…Margin adds or removes space around the element…and the shorthand and longhand rules…are the same as padding.…Margin also accepts negative values.…By default, block elements stack on top of each other,…but setting margin to negative values…
- Reviewing CSS syntax
- Reviewing simple selectors and attribute selectors
- Using pseudo-class selectors and pseudo-element selectors
- Reviewing the CSS box model
- Adding a menu to your project
- Using float, display, and position
- Debugging CSS
- Resetting stylesheets
- Working with background images
- Exploring a mobile-first approach for responsive web design
- Creating flexible and fluid layouts
Skill Level Beginner
Building Responsive Forms with Flexboxwith James Williamson1h 19m Intermediate
Workflow Tools for Web Developerswith Christina Truong1h 13m Intermediate
1. CSS Selectors
3. Tips and Tools
4. Responsive and Mobile
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.