CSS Quiz 1

Which of the following properties is used to set the space between the content and the border of an element in the CSS Box Model?

• margin

• padding

• border

• width

Tags

DOK Level 2: Skill/Concept

In a Flexbox layout, which property is used to define the alignment along the main axis?

• align-items

• justify-content

• flex-direction

• flex-wrap

Tags

DOK Level 2: Skill/Concept

Which CSS property is used to change the text color of an element?

• font-color

• text-color

• color

• text-style

Tags

DOK Level 2: Skill/Concept

Which of the following is a correct CSS selector for selecting all <p>

elements inside a <div> element?

• div p

• div > p

• div + p

• div ~ p

Tags

DOK Level 2: Skill/Concept

What is the purpose of the `@media` rule in CSS?

• To apply styles to different media types/devices

• To import external CSS files

• To define keyframe animations

• To create CSS variables

Tags

DOK Level 2: Skill/Concept

Given the following CSS code, what will be the background color of the <div> element?

```div { background-color: red; } div:hover { background-color: blue; } ```

• Red

• Blue

• Red when hovered, Blue otherwise

• Blue when hovered, Red otherwise

Tags

DOK Level 3: Strategic Thinking

How would you create a responsive layout that changes from a single column to a two-column layout when the screen width is 600px or more?

• Use `@media` rule with `flexbox`

• Use `@media` rule with `grid`

• Use `@media` rule with `float`

• Use `@media` rule with `position`

Tags

DOK Level 3: Strategic Thinking

Which of the following CSS properties can be used to create a flexible layout that adjusts to different screen sizes?

• display: block

• display: inline

• display: flex

• display: none

Tags

DOK Level 2: Skill/Concept

What is the effect of setting `flex-grow: 1` on a flex item?

• The item will shrink to fit the container

• The item will grow to fill the available space

• The item will be hidden

• The item will be aligned to the start of the container

Tags

DOK Level 2: Skill/Concept

Which of the following is a pseudo-class in CSS?

• :hover

• .hover

• #hover

• hover

Tags

DOK Level 2: Skill/Concept