1. What is a drawback of inline styles compared to external stylesheets?

A. They are faster B. They mix presentation with content, reducing maintainability C. They load asynchronously D. They support inheritance better

2. What is the function of container queries in CSS?

A. To style elements based on viewport width only B. To apply styles based on the size of their container C. To embed JavaScript within CSS D. To define color palettes

3. Which method of adding CSS is considered best practice for maintainability?

A. Inline styles B. Internal stylesheet C. External stylesheet D. Embedded JavaScript

4. What does the CSS Box Model consist of?

A. Margin, Padding, Color, Content B. Margin, Border, Padding, Content C. Border, Padding, Display, Content D. Margin, Border, Display, Content

5. Why is it recommended to avoid using !important in CSS?

A. It increases file size significantly B. It prevents CSS variables from working C. It can cause specificity conflicts and makes overrides harder to manage D. It reduces browser compatibility

6. What is the mobile-first approach in responsive design?

A. Designing layouts starting from desktop sizes down to mobile B. Targeting large screens first with media queries C. Applying default styles for mobiles and enhancing for larger screens using min-width media queries D. Using only container queries for responsiveness

7. Which color format provides support for opacity in colors?

A. Hexadecimal B. RGB C. HSL D. HSLA

8. Which layout method is best suited for two-dimensional grid layouts?

A. Flexbox B. CSS Grid C. Float D. Inline-block

9. Which CSS feature allows toggling between light and dark themes?

A. CSS variables in combination with media queries or JavaScript B. CSS Grid C. Animation keyframes D. Container Queries

10. What is the importance of using semantic class names in CSS?

A. To make CSS parsing faster B. To improve code readability and maintainability C. To increase specificity conflicts D. To reduce file size

11. Which modern CSS feature helps in handling specificity conflicts predictably?

A. Container Queries B. Cascade Layers C. Flexbox D. Media Queries

12. Which CSS pseudo-class targets the state of a hovered element?

A. :active B. :hover C. :focus D. :visited

13. Which CSS property is used to define smooth changes between state changes?

A. animation B. transition C. transform D. opacity

14. What does the 'outline-offset' property do in focus styling?

A. Sets the thickness of the outline B. Sets the color of the outline C. Moves the outline away from the element's edge D. Changes the shape of the outline

15. Why should the use of '!important' be minimized in CSS?

A. It increases file size B. It overrides all other rules and can make maintenance difficult C. It slows down page rendering D. It disables CSS animations

16. What does the 'clamp()' function in CSS do?

A. Clamps the opacity between 0 and 1 B. Sets a value that stays within a minimum, preferred, and maximum range C. Loops an animation infinitely D. Fixes element position on the screen

17. Why is it recommended to avoid ID selectors for styling?

A. They are deprecated in CSS B. They have too high specificity and reduce reusability C. They are slower to process D. They don't work with media queries

18. What is the main advantage of using CSS Grid over Flexbox?

A. Better for one-dimensional layouts B. Provides two-dimensional layout control (rows and columns) C. Easier animations D. Less CSS code required for responsiveness

19. Which is a key difference between 'visibility: hidden;' and 'display: none;'?

A. 'visibility: hidden' removes the element from the document flow; 'display: none' does not B. 'display: none' hides the element but keeps its space; 'visibility: hidden' removes the space C. 'visibility: hidden' keeps the element's space; 'display: none' removes it totally D. Both behave the same

20. Which media query respects user preference for reduced motion?

A. @media (prefers-color-scheme: dark) B. @media (max-width: 600px) C. @media (prefers-reduced-motion: reduce) D. @media (orientation: portrait)

21. What happens when two CSS rules have the same specificity?

A. The one with fewer declarations applies B. The one appearing last in the source order applies C. Both rules apply simultaneously D. The one with !important applies

22. What is the purpose of a focus indicator in CSS?

A. To improve page load speed B. To highlight an element when it is focused for accessibility C. To add animations to buttons D. To hide elements on focus

23. When organizing a stylesheet, why should related properties be grouped logically?

A. To reduce specificity automatically B. To make the stylesheets more readable and maintainable C. So the browser loads styles faster D. To avoid using selectors altogether

24. How should focus outlines be handled to maintain accessibility?

A. Remove them entirely for clean design B. Replace default outlines with clear, custom visible indicators C. Hide using visibility: hidden D. Use !important to enforce outline removal

25. How does the 'box-sizing: border-box;' property affect element width calculation?

A. Adds padding and border outside the width B. Excludes padding and border from width C. Includes padding and border within the width D. Changes content box to margin box

26. What are CSS variables commonly prefixed with?

A. $ B. -- C. @ D. #

27. What responsive design approach is recommended in these notes?

A. Desktop-first B. Mobile-first C. Tablet-first D. Fixed layout

28. Which selector has the highest specificity?

A. Element selector (e.g., p) B. Class selector (e.g., .text) C. ID selector (e.g., #header) D. Universal selector (*)

29. Which CSS property is best suited for creating smooth transitions between state changes?

A. animation-duration B. transition C. transform D. opacity

30. What is the BEM naming convention used for?

A. Writing animations B. Organizing stylesheet properties logically C. Naming CSS classes to improve readability and reusability D. Styling pseudo-elements

31. Which CSS unit is relative and preferred for responsive design?

A. px B. cm C. rem D. pt

32. Why is it recommended to avoid deep nesting in CSS preprocessors?

A. It decreases specificity B. It increases CSS file size and reduces readability C. It prevents media queries from working D. It breaks animations

33. In CSS specificity calculation, which selector has the highest specificity?

A. .class B. p C. #id D. element:hover

34. When following the BEM naming convention, what does the modifier part of a class represent?

A. A standalone component B. A variation or state of a block or element C. A child element of the block D. A global utility class

35. What CSS feature allows for theming and maintainability by storing reusable values?

A. Media queries B. CSS variables C. Inline styles D. Class selectors

36. How does the 'display: none;' property affect an element in the layout?

A. Removes the element and its space from the layout B. Keeps element visible but disables interaction C. Makes the element invisible but occupies space D. Makes the element semi-transparent

37. Which CSS layout method is most appropriate for creating a two-dimensional grid layout?

A. Flexbox B. Float C. Grid D. Inline-block

38. What CSS property changes font size responsively between min and max values?

A. font-responsive B. font-size-clamp C. font-size with clamp() function D. font-scale

39. What advantage do CSS preprocessors like Sass provide?

A. They add support for JavaScript inside CSS B. They add functionality such as variables, nesting, and mixins to CSS C. They replace CSS variables D. They reduce CSS specificity

40. What is the purpose of using @media (prefers-reduced-motion: reduce) in CSS?

A. To disable CSS variables B. To detect user preference for reduced animation and provide accessibility support C. To force animations to run smoothly on all devices D. To increase animation duration on high-performance machines

41. Which CSS selector targets all <p> elements that do not have the class "special"?

A. p:not(.special) B. p.special C. p > .special D. p ~ .special

42. What is the main purpose of the cascade in CSS?

A. To style elements using JavaScript B. To resolve conflicts between multiple CSS rules C. To load external stylesheets D. To optimize CSS file size

43. In BEM naming, what does the double underscore represent?

A. Modifier B. Class separator C. Element of a block D. ID selector

44. Which CSS rule correctly respects user preferences to reduce animations?

A. * { animation: none; } B. @media (prefers-reduced-motion: reduce) { ... } C. body { animation-iteration-count: infinite } D. * { opacity: 0.5; }

45. What is the primary benefit of using CSS Variables in modern web design?

A. Ensures animations run faster B. Allows for maintainability and easy theming C. Automatically optimizes CSS for performance D. Prevents specificity wars

46. What is the default value of the CSS position property?

A. Relative B. Fixed C. Static D. Absolute

47. What does the ':focus' pseudo-class represent?

A. When the mouse is hovering over an element B. When an element is clicked C. When an element gains input focus (keyboard or other) D. When a form is submitted

48. How do container queries enhance responsive web design?

A. They replace media queries entirely for all responsive cases B. Allow components to adapt styles based on the size of their container, not viewport C. Use viewport width for adjusting layouts D. Apply global styles to all containers at once

49. Which is a valid use of Flexbox in layouts?

A. Creating complex two-dimensional grid layouts B. Aligning items along a single axis (row or column) C. Styling text color D. Setting responsive font sizes

50. Which display property causes elements to take full width and start on a new line?

A. inline B. block C. inline-block D. none