Skip to content

This textbook is in beta – content is actively being refined. Report issues or suggestions

12.04 Css Ui And Ux Principles - Quiz

Check your understanding

  1. What is the main benefit of separating content, presentation, and behaviour in web development?

    • It makes websites load faster
    • It improves maintainability and allows independent changes to each layer { data-correct }
    • It reduces the amount of code needed
    • It makes websites more secure

  2. What are design tokens in a CSS design system?

    • JavaScript functions that generate styles
    • Named entities that store visual design attributes like colors and spacing { data-correct }
    • HTML templates for consistent layouts
    • Database entries for user preferences

  3. In responsive design, what does “mobile-first” approach mean?

    • Designing only for mobile devices
    • Writing CSS for mobile devices first, then adding styles for larger screens { data-correct }
    • Testing on mobile devices before desktop
    • Making mobile apps instead of websites

  4. Which CSS feature is most important for creating accessible focus indicators?

    • border-radius
    • outline { data-correct }
    • background-color
    • font-size

  5. What is the minimum recommended touch target size for accessible interfaces?

    • 24px × 24px
    • 32px × 32px
    • 44px × 44px { data-correct }
    • 64px × 64px

  6. Which CSS unit is generally preferred for responsive typography?

    • px (pixels)
    • rem (root em) { data-correct }
    • cm (centimeters)
    • pt (points)

  7. What does WCAG stand for in web accessibility?

    • Web Content Accessibility Guidelines { data-correct }
    • World Wide Web CSS Guidelines
    • Web Color and Graphics standards
    • Website Compatibility Across Groups

  8. Which CSS media query would you use to provide styles for users who prefer reduced motion?

    • @media (max-width: 768px)
    • @media (prefers-reduced-motion: reduce) { data-correct }
    • @media (orientation: portrait)
    • @media (prefers-color-scheme: dark)

  9. What is the purpose of CSS custom properties (variables)?

    • To make CSS files smaller
    • To store and reuse values throughout stylesheets for consistency { data-correct }
    • To add JavaScript functionality to CSS
    • To validate CSS syntax

  10. Which principle is most important for creating good visual hierarchy?

    • Using many different colors
    • Consistent spacing and typography scales { data-correct }
    • Adding animations to all elements
    • Using the same font size for all text