I'll start this lesson with a generalization: Web content is delivered in rectangular boxes. Depending on where and how they are used, these boxes may be referred to as div tags, sections, headers, footers etc., but all begin life as basic rectangular boxes. The characteristics of theses boxes; their width, height, backgrounds, how they relate to each other on the page, etc. are determined by CSS. As a web developer, it is important that you have a good understanding of how boxes and CSS work together to style your content.
Begin Here
The starting point for our exploration is a web page titled The Box Model. I STRONGLY encourage you to invest a lot of time and thought into this section. For example, follow the links that lead to additional pages where you can learn more about and explore properties such as width, border, margin, padding, margin-collapsing, etc. This section also features several interactive editors where you can experience what happens when you change CSS values.
Backgrounds
This is a wonderful section that forever changed my relationship with backgrounds. NOW I AM IN CHARGE!! You too can master backgrounds if you read this section thoroughly and click your way through the examples. Expect lots of quiz questions over all sections EXCEPT for Background attachment, Background shorthand, and Multiple Backgrounds. Read through these three sections, but put most of your energy into the other sections.
Borders
This one is straightforward. Read all the way through the Border Radius section. Make sure you understand the basics of how to style borders such as width, style, and color. Also, be clear on how to style each of the four border sides of an element separately. Border-right, border-left, etc.