CSS Fundamentals Quiz — Questions & Answers

This quiz contains 10 questions. Below is a complete reference of all questions, answer choices, and correct answers. You can use this section to review after taking the interactive quiz above.

1. Question 1: Question 1

   What type of CSS framework provides pre-built utility classes to style HTML elements directly?

   • Component-based CSS framework
   • Utility-first CSS framework
   • Semantic CSS framework
   • Object-oriented CSS framework
   • Grid-based CSS Framework
   Show correct answer

   Correct answer: Utility-first CSS framework

2. Question 2: Question 2

   Which of the following is a benefit of using a utility-first CSS framework?

   • Reduced HTML size
   • Faster initial page load
   • Highly Customizable
   • Automatic style updates
   • Simplified JavaScript integration
   Show correct answer

   Correct answer: Highly Customizable

3. Question 3: Question 3

   What are the main ways to integrate a utility-first CSS framework into a project?

   • Using a CDN or linking a local CSS file
   • Using a CDN or installing with a package manager
   • Using a preprocessor or a CDN
   • Using only a CSS file
   • Embedding CSS in Javascript
   Show correct answer

   Correct answer: Using a CDN or installing with a package manager

4. Question 4: Question 4

   How can you apply text alignment to the left, center, or right in CSS using utility classes?

   • Using classes like align-left, align-center, and align-right
   • Using classes like float-left, float-center, and float-right
   • Using classes like text-left, text-center, and text-right
   • Using classes like justify-left, justify-center, and justify-right
   • Using classes like pos-left, pos-center, and pos-right
   Show correct answer

   Correct answer: Using classes like text-left, text-center, and text-right

5. Question 5: Question 5

   How can you create responsive margins and paddings in CSS using utility classes?

   • Using media queries directly in the HTML
   • Using responsive variants with margin and padding utility classes
   • Using JavaScript to dynamically add margins and paddings
   • Using CSS grid to manage spacing
   • Using fixed pixel values for all margins and paddings
   Show correct answer

   Correct answer: Using responsive variants with margin and padding utility classes

6. Question 6: Question 6

   Which of the following is NOT a typical advantage of using a utility-first CSS approach?

   • Rapid development due to pre-built classes
   • Highly customizable design through configuration files
   • Smaller CSS file sizes by including only used classes
   • Easier debugging of complex styling issues
   • Simplified responsive design implementation
   Show correct answer

   Correct answer: Easier debugging of complex styling issues

7. Question 7: Question 7

   What is the primary purpose of a utility-first CSS framework?

   • To provide pre-designed components for quick UI creation
   • To enable granular control over UI elements via pre-built classes
   • To enforce a strict design system across a project
   • To abstract CSS styling into reusable JavaScript modules
   • To automate the generation of CSS from design mockups
   Show correct answer

   Correct answer: To enable granular control over UI elements via pre-built classes

8. Question 8: Question 8

   Consider the CSS utility class 'm-auto'. What does this class commonly achieve?

   • Sets the margin to a fixed value
   • Automatically calculates the font size
   • Centers the element horizontally by setting left and right margins to auto
   • Applies a default margin to all sides of the element
   • Removes all margins from the element
   Show correct answer

   Correct answer: Centers the element horizontally by setting left and right margins to auto

9. Question 9: Question 9

   Which of the following is a valid way to add a 2rem margin to the top of an element, only on medium screens and larger, using a CSS utility framework?

   • margin-top-md-8
   • mt-md-2rem
   • md:mt-8
   • mtop-md-2
   • margintop-medium-8
   Show correct answer

   Correct answer: md:mt-8

10. Question 10: Question 10

    In a utility-first CSS framework, what is the purpose of responsive prefixes like 'sm:', 'md:', 'lg:', and 'xl:'?

    • To define the element's size in different units.
    • To apply styles only when the browser is in dark mode.
    • To apply styles based on the element's position in the DOM.
    • To conditionally apply styles based on screen size or viewport width.
    • To control the animation speed of an element.
    Show correct answer

    Correct answer: To conditionally apply styles based on screen size or viewport width.