[Week 4 ] CSS Essentials: Box Model, Layouts, and Styling

What are the four components of the CSS Box Model?

• Content, Padding, Margin, Border

• Content, Margin, Border, Width

• Padding, Border, Height, Width

• Content, Padding, Height, Margin

Answer explanation

The CSS Box Model consists of four components: Content (the actual content), Padding (space around the content), Border (surrounds the padding), and Margin (space outside the border). Thus, the correct answer is Content, Padding, Margin, Border.

What does the Padding property do in the Box Model?

• Adds space outside the border

• Adds space between the content and the border

• Changes the border color

• Resizes the element

Answer explanation

The Padding property adds space between the content and the border of an element, creating a buffer that separates the inner content from the outer border. This is crucial for layout and design in the Box Model.

Which property is used to define the space outside the element?

• Padding

• Margin

• Border

• Width

Answer explanation

The margin property defines the space outside an element, creating distance between it and other elements. In contrast, padding is the space inside the element, while border surrounds the element itself.

What does the box-sizing property do when set to border-box?

• It includes padding and border in the element’s total width and height

• It excludes padding and border from the element’s total width and height

• It only affects the border

• It changes the display property

Answer explanation

The box-sizing property set to border-box alters the box model so that the element's total width and height includes padding and border, making layout calculations easier and more intuitive.

Which of the following lengths is relative to the viewport width?

• px

• em

• vw

• rem

Answer explanation

The correct answer is 'vw' (viewport width), which is a relative unit that represents a percentage of the width of the viewport. In contrast, 'px', 'em', and 'rem' are not relative to the viewport width.

Which property is commonly used to center an element horizontally?

• text-align: center;

• margin: auto;

• display: block;

• float: left;

Answer explanation

The property 'margin: auto;' is commonly used to center block elements horizontally within their container. It automatically adjusts the left and right margins, effectively centering the element. Other options do not achieve horizontal centering.

How do you adjust the spacing between elements in CSS?

• By changing the line-height

• By using padding and margin

• By altering the font size

• By using text-indent

Answer explanation

The correct way to adjust spacing between elements in CSS is by using padding and margin. Padding adds space inside an element, while margin adds space outside of it, effectively controlling the distance between elements.

What does inheritance in CSS refer to?

• Elements receiving styles from their parent elements

• Copying styles from one element to another

• Using the same class for multiple elements

• Styling elements based on their type

Answer explanation

Inheritance in CSS means that elements can receive styles from their parent elements, allowing for a hierarchical structure in styling. This is why the correct answer is 'Elements receiving styles from their parent elements'.

Which color model uses RGB values?

• HSL

• CMYK

• HEX

• RGB

Answer explanation

The RGB color model uses RGB values to represent colors through the combination of red, green, and blue light. Therefore, the correct answer is RGB.

What is the purpose of the Developer Tools in browsers?

• To edit images

• To debug and analyze web pages

• To create HTML documents

• To optimize server performance

Answer explanation

The Developer Tools in browsers are primarily used to debug and analyze web pages. They provide features like inspecting elements, monitoring network requests, and testing scripts, which help developers improve web applications.