Week 2 : CSS

What is the purpose of the z-index property in CSS?

• To control the size of an element

• To control the stacking order of elements

• To change the color of an element

• To set the transparency of an element

Which of the following CSS properties is used to change the text color inside an element?

• background-color

• text-color

• color

• font-color

What will be the result of the following CSS code?

p {

margin: 20px;

padding: 20px;

}

• A paragraph with a 20px space inside the content and a 20px space outside the border.

• A paragraph with a 20px space outside the content and a 20px space inside the border.

• A paragraph with a 20px space inside the border but no space outside

• A paragraph with only a 20px space outside the content.

Given the following CSS, which elements will be affected by the styles?

div > p {

color: blue;

}

• All p elements nested inside any div element

• All p elements that are direct children of a div element

• All p elements

• The first p element inside a div element

What is the difference between position: absolute and position: fixed?

• absolute positions relative to the viewport, while fixed positions relative to the nearest positioned ancestor.

• absolute positions relative to its original location, while fixed stays in one place relative to the viewport.

• absolute positions relative to the nearest positioned ancestor, while fixed positions relative to the viewport.

• absolute is used for background images, while fixed is used for content.

If you want a flex container to display its items in a vertical column, which property would you use?

• flex-direction: row;

• align-items: center;

• flex-direction: column;

• justify-content: center;

What is the effect of the display: none; property?

• It hides an element but still takes up space in the layout.

• It hides an element and removes it from the layout flow.

• It makes an element transparent.

• It changes the element to a block-level element.

Which of the following correctly centers a block element horizontally within its parent container?

• text-align: center;

• margin: auto;

• display: inline-block;

• padding: 0 auto;

What does the ::before pseudo-element do in CSS?

• Inserts content before an element

• Selects the first child of an element

• Sets the style of the first line of text inside an element

• Inserts content after an element

What happens if you set width: 100vw; on an element?

• The element will be 100% of its parent element's width.

• The element will be 100% of the viewport's height.

• The element will be 100% of the viewport's width.

• The element will be hidden from view.