The CSS box model properties are used for sizing and spacing elements. Explore how to apply the box model concepts to your projects.
- [Instructor] Let's update our projects…by adding in the content wrappers.…To keep the text from spanning across the whole page,…starting with the header.…Make sure to put the div just inside of the header tag.…We want to make sure we enclose all of the content,…but stay within the sections.…So as a side note, in the Atom editor,…there's actually an auto complete feature for writing HTML.…If I was just to type div and press tab,…it'll actually just complete it for me.…So just a little shortcut if you're using the Atom editor.…
I'm going to name my class content wrap.…And make sure that this closing div closes just before…the closing header tag.…Just to keep the content within this content wrap container.…So let's go back to the CSS now and add in this style…in the global section.…We're going to keep this style here in the global section,…because it's going to be reused throughout the project.…So I'll add my content wrap class here, give it a width,…we're going to give it a width of 950 pixels.…
And then add the margin, zero for the top and the bottom,…
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property
Skill Level Beginner
1. Getting Started
2. CSS Core
- 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.