Modern Web Design with HTML5, CSS3, and JavaScript - Box Model – Exercise

The video tutorial explains the CSS box model, focusing on styling a footer. It covers setting the width, border, padding, and margin using shorthand methods. The tutorial encourages hands-on practice and demonstrates how to use developer tools to inspect elements. It also discusses centering techniques and positioning elements relative to their parent. The video concludes with final adjustments and encourages viewers to experiment with the box model.

What is the initial width set for the footer in the box model?

• 80%

• 75%

• 90%

• 100%

Which tool can be used to inspect the box model properties of an element?

• Console

• Elements

• Network

• Sources

What shorthand method is used to set the margin for the footer?

• 25px left and right, 0px top and bottom

• 20px for all sides

• 20px top and bottom, 0px left and right

• 0px for all sides

How can the footer be centered within its parent element?

• By using absolute positioning

• By setting width to 100%

• By using float left

• By setting margin to auto

What is the final height set for the footer to fit the box model?

• 180px

• 200px

• 250px

• 150px