CSS Fundamentals Quiz Quiz

1. Question 1

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

   1. Component-based CSS framework
   2. Utility-first CSS framework
   3. Semantic CSS framework
   4. Object-oriented CSS framework
   5. Grid-based CSS Framework

2. Question 2

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

   1. Reduced HTML size
   2. Faster initial page load
   3. Highly Customizable
   4. Automatic style updates
   5. Simplified JavaScript integration

3. Question 3

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

   1. Using a CDN or linking a local CSS file
   2. Using a CDN or installing with a package manager
   3. Using a preprocessor or a CDN
   4. Using only a CSS file
   5. Embedding CSS in Javascript

4. Question 4

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

   1. Using classes like align-left, align-center, and align-right
   2. Using classes like float-left, float-center, and float-right
   3. Using classes like text-left, text-center, and text-right
   4. Using classes like justify-left, justify-center, and justify-right
   5. Using classes like pos-left, pos-center, and pos-right

5. Question 5

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

   1. Using media queries directly in the HTML
   2. Using responsive variants with margin and padding utility classes
   3. Using JavaScript to dynamically add margins and paddings
   4. Using CSS grid to manage spacing
   5. Using fixed pixel values for all margins and paddings

6. Question 6

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

   1. Rapid development due to pre-built classes
   2. Highly customizable design through configuration files
   3. Smaller CSS file sizes by including only used classes
   4. Easier debugging of complex styling issues
   5. Simplified responsive design implementation

7. Question 7

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

   1. To provide pre-designed components for quick UI creation
   2. To enable granular control over UI elements via pre-built classes
   3. To enforce a strict design system across a project
   4. To abstract CSS styling into reusable JavaScript modules
   5. To automate the generation of CSS from design mockups

8. Question 8

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

   1. Sets the margin to a fixed value
   2. Automatically calculates the font size
   3. Centers the element horizontally by setting left and right margins to auto
   4. Applies a default margin to all sides of the element
   5. Removes all margins from the element

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?

   1. margin-top-md-8
   2. mt-md-2rem
   3. md:mt-8
   4. mtop-md-2
   5. margintop-medium-8

10. Question 10

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

    1. To define the element's size in different units.
    2. To apply styles only when the browser is in dark mode.
    3. To apply styles based on the element's position in the DOM.
    4. To conditionally apply styles based on screen size or viewport width.
    5. To control the animation speed of an element.