At one time or another, Learning Goal #6 has been called “Mastering the Box Model with CSS” because the “box model” is one of the most important parts of HTML/CSS design. This is the part of web design that controls margins and padding. How much space do you need between elements? Why does padding work for spacing in one place, but not in another? Learn the Box Model and you’ll be prepared to answer those questions for this and any future design.

Below are some helpful tips and resources that you can use during and after this lesson is over.

CSS Style Tips to Remember

• Think of every element as a box on a page.
• The Box Model is basically an imaginary box surrounding the content inside an element.
• The content is what you put in between the opening and closing tags of your element.
• Every element has a border, padding, and margins, even if you don’t see them (the default is 0px).
• Padding is the distance between your content and the border.
• Margin is the distance between your border and the other elements in your document.
• The margin and padding properties can be specific to a side (margin-top, padding-right, etc) or it can be written as a complete property in this order: top, right, bottom, left (margin:1px 2px 3px 4px)
• To insert a border, simply use border:size type color;
• Percentage sizes are best with margin, padding, and border, especially when trying to make sure that the page dimensions will work with other screen resolutions.

Assignment #1 (1 Point): SoloLearn Lessons
Log into your SoloLearn account and find the Course called CSS Fundamentals. Inside of this course, watch the following lessons (you will need your headphones), but when you finish, be sure to make note of how many SoloLearn points you have earned. Points are based on how many sections you complete and how many questions you answer correctly after each section.

23. Introducing the Box Model
24. Understanding the Box Model
25. Borders
26. Width and Height

Assignment #2 (2 Points): Design Project
The Box Model is all about learning how to manipulate the position of elements throughout a page. The videos focused on how to use width, height, borders, margins, and padding in CSS. Your goal in this project is to arrange three pages of boxes with smaller and smaller images centered within those boxes. For example, these three pages have four identical DIV blocks (Page 1, Page 2, Page 3), but the images inside of each block on each page get smaller and smaller. Setting up the page is the easy part. Using CSS to get those images centered inside the blocks is the hard part. Ultimately, you just want the images to keep getting smaller on each page while keeping them centered within the boxes like this. Follow the steps below to get started.

• STEP 1: Go into your CSS subfolder and create a new folder called 6-4_cardboardchallenge.
• STEP 2: Inside of your new 6-4_cardboardchallenge folder, create three HTML documents (boxes1.html, boxes2.html, and boxes3.html) and one CSS document (style.css).
• STEP 3: Go to Google and save 12 different pictures of anything related to cardboard or boxes. It can be moving boxes, colored boxes, cardboard challenge images, cardboard creations, etc. Save ALL images to your 6-4_cardboardchallenge folder.
• STEP 4: Open your boxes1.html document, then create a simple source code from scratch with (1) a heading called “Cardboard Box Challenge,” (2) a three-button navigation menu for your three pages, and (3) a collection of four divs containing four images centered inside (sort of like this). You may NOT use the center tag on this challenge. You must use margins, padding, width, height, and borders.
• STEP 5: Make sure that all of your styling is in a separate document called CSS. Do not do ANY styling inside of your HTML pages.
• STEP 6: Once you have the first page done, copy/paste your source code into boxes2.html, change the images, then go to your CSS document and adjust the size/position so that the images on the second page are smaller, but still centered like this example.
• STEP 7: Once you have the second page done, copy/paste your source code into boxes3.html, change the images, then go to your CSS document and adjust the size/position so that the images on the third page are even smaller, but still centered like this example.
• STEP 8: Look back over your three Cardboard Box Challenge pages to make sure they all link back and forth. If the pages work, make sure it’s easy to tell that the images get smaller from page to page. In other words, make sure that your pages look something like the Page 1, Page 2, and Page 3 examples from above.

Assignment #3 (1 Point): Update Your Index
Similar to the last lesson, take the time to add your new design to your index page using a screenshot and a link. Remember that since you built a three page website, you do not need to provide a link to all three pages. All you need to provide is a link to the first page, which already links to the other pages. Also, remember that the links will have to point into the folder you made.

Assignment #4 (1 Point): Review and Quiz
Look over the 6.4 Review Sheet. Read over the vocabulary terms. Look over the questions. Make sure you know how to answer each question. Then go to eCampus, find the quiz for Lesson 6.4, and take it. This is a way for you to show the teacher that you have finished this lesson.

If you have finished the assignments in this lesson, you will need a new password so that you can enter Lesson 6.5. Feel free to ask the teacher and don’t be afraid to raise your hand or go up to ask. If you are actually finished with a lesson, you will get an answer.