Web Developer MCQs – CSS

1. Which syntax is used to declare a CSS custom property (variable)?
(A) $main-color: #ff0000;
(B) main-color: #ff0000;
(C) var(–main-color: #ff0000);
(D) @variable main-color: #ff0000;

2. How do you use a CSS variable in a property value?
(A) color: $main-color;
(B) color: –main-color;
(C) color: var(–main-color);
(D) color: @main-color;

3. Which CSS at-rule allows you to define a property with syntax, initial value, and inheritance?
(A) @custom-property
(B) @variable
(C) @define
(D) @property

4. Which CSS property makes an element include padding and border in its total width?
(A) box-sizing: content-box;
(B) box-sizing: border-box;
(C) box-sizing: padding-box;
(D) box-sizing: full-box;

5. Which box-sizing value makes the width and height apply only to content, excluding padding and border?
(A) content-box
(B) border-box
(C) padding-box
(D) inner-box

6. Which CSS at-rule is used to apply styles based on screen size or device type?
(A) @screen
(B) @responsive
(C) @media
(D) @query

7. Which media feature targets screens with a maximum width of 768px?
(A) @media (max-width: 768px) { … }
(B) @media screen and (width <= 768px) { … }
(C) @media (width-max: 768px) { … }
(D) @media (max-device-width: 768px) { … }

8. Which media feature applies styles only for devices with a minimum width of 1024px?
(A) @media (min-width: 1024px) { … }
(B) @media (width >= 1024px) { … }
(C) @media screen and (min-width: 1024px) { … }
(D) Both (A) and (C)

9. Which syntax correctly provides a fallback value when using a CSS variable?
(A) color: fallback(–main-color, #000);
(B) color: var(–main-color | #000);
(C) color: var(–main-color, #000);
(D) color: var(–main-color ? #000);

10. How can a CSS variable be scoped globally?
(A) By declaring it inside body
(B) By declaring it inside :root
(C) By declaring it inside html
(D) By declaring it inside any element

11. Which property allows smooth animation when using a custom property defined with @property?
(A) transform
(B) animation
(C) transition
(D) keyframes

12. Which @property attribute determines if a property is inherited?
(A) inheritable
(B) inherit
(C) inherits
(D) inheritance

13. Which box-sizing value is recommended to avoid layout issues when using padding and borders?
(A) padding-box
(B) content-box
(C) border-box
(D) full-box

14. Which media query targets only screens in portrait orientation?
(A) @media (mode: portrait) { … }
(B) @media (portrait) { … }
(C) @media (screen: portrait) { … }
(D) @media (orientation: portrait) { … }

15. Which media query applies styles only when printing a page?
(A) @media (type: print) { … }
(B) @media print { … }
(C) @media print-mode { … }
(D) @media (media-type: print) { … }

16. Which @property attribute sets the default value for the custom property?
(A) start-value
(B) default
(C) value
(D) initial-value

17. How do you reference a CSS variable inside another CSS variable?
(A) secondary-color: $primary-color;
(B) secondary-color: –primary-color;
(C) secondary-color: var(–primary-color);
(D) secondary-color: @primary-color;

18. Which media query targets screens between 600px and 1200px?
(A) @media (min-width: 600px) and (max-width: 1200px) { … }
(B) @media (width >= 600px and width <= 1200px) { … }
(C) @media (min-width: 600px) to (max-width: 1200px) { … }
(D) @media (width: 600px-1200px) { … }

19. Which method provides the best support for fallback when a CSS variable is not supported?
(A) Using var(–variable, fallback-value)
(B) Using @property with a fallback
(C) Using JavaScript to set the variable
(D) Using !important on the variable

20. Which CSS property defines a flex container?
(A) flex-container: true;
(B) display: flex;
(C) display: block;
(D) flex: container;

21. Which property sets the direction of flex items in a container?
(A) direction
(B) flex-order
(C) flex-direction
(D) item-direction

22. Which property allows flex items to wrap onto multiple lines?
(A) flex-wrap
(B) wrap-items
(C) flex-flow
(D) line-wrap

23. Which shorthand property sets both flex-direction and flex-wrap?
(A) flex-set
(B) flex
(C) flex-style
(D) flex-flow

24. Which property controls the alignment of flex items along the main axis?
(A) justify-content
(B) align-items
(C) align-content
(D) flex-align

25. Which property controls the alignment of flex items along the cross axis?
(A) justify-content
(B) align-items
(C) flex-align
(D) align-self

26. Which property allows individual flex items to override the container’s cross-axis alignment?
(A) align-self
(B) justify-self
(C) flex-order
(D) flex-item-align

27. Which property controls the order of flex items in a container?
(A) item-order
(B) flex-order
(C) order
(D) position

28. Which property specifies how much a flex item will grow relative to others?
(A) flex-grow
(B) flex-shrink
(C) flex-basis
(D) flex-size

29. Which property specifies the initial main size of a flex item before free space is distributed?
(A) flex-grow
(B) flex-basis
(C) flex-shrink
(D) flex-size

30. Which property allows a flex item to shrink if necessary?
(A) flex-grow
(B) flex-shrink
(C) flex-basis
(D) flex-wrap

31. Which CSS technique allows layouts to adapt to different viewport sizes?
(A) Responsive Web Design (RWD)
(B) Fixed Layout
(C) Absolute Positioning
(D) Static Layout

32. Which unit is relative to the viewport width?
(A) em
(B) px
(C) vw
(D) %

33. Which unit is relative to the viewport height?
(A) rem
(B) %
(C) px
(D) vh

34. Which RWD technique uses CSS Grid to adapt layouts for different screens?
(A) RWD Grid View
(B) Flexbox Layout
(C) Absolute Positioning
(D) Table Layout

35. Which at-rule applies different styles for different devices or screen widths?
(A) @responsive
(B) @viewport
(C) @media
(D) @screen

36. Which technique ensures images scale correctly on different screen sizes?
(A) max-width: 100%; height: auto;
(B) width: fixed; height: fixed;
(C) width: auto; height: 100%;
(D) img-responsive: true;

37. Which technique ensures videos scale correctly on different screen sizes?
(A) width: 100%; height: auto;
(B) width: fixed; height: fixed;
(C) video-responsive: true;
(D) height: 100%; width: auto;

38. Which is a popular CSS framework for building responsive websites?
(A) React
(B) jQuery
(C) Bootstrap
(D) Node.js

39. Which feature in RWD templates ensures layouts adjust automatically across devices?
(A) Fluid grids
(B) Fixed-width grids
(C) Absolute positioning
(D) Table-based layouts

40. Which CSS property makes a navigation bar responsive on small screens?
(A) position: absolute;
(B) display: block;
(C) float: left;
(D) display: flex;

41. Which CSS property allows a navigation bar to wrap menu items on smaller screens?
(A) flex-wrap: wrap;
(B) overflow: hidden;
(C) white-space: nowrap;
(D) display: block;

42. Which property is used to evenly space items in a responsive flex container?
(A) justify-content: space-between;
(B) align-items: space-between;
(C) flex: space-between;
(D) order: space-between;

43. Which property ensures buttons scale properly in RWD layouts?
(A) width: fixed;
(B) width: 100%; max-width: 200px;
(C) height: fixed;
(D) float: left;

44. Which property ensures form inputs adjust their width based on screen size?
(A) width: 100%;
(B) width: auto;
(C) max-width: 50px;
(D) flex-basis: fixed;

45. Which CSS Grid property defines the number of columns in a responsive layout?
(A) grid-count
(B) grid-columns
(C) grid-template-columns
(D) grid-width

46. Which CSS Grid property defines the spacing between grid items?
(A) gap
(B) spacing
(C) grid-gap
(D) margin

47. Which CSS property allows a grid item to span multiple columns?
(A) column-span: 2;
(B) grid-span: 2;
(C) grid-width: 2;
(D) grid-column: span 2;

48. Which technique ensures responsive images maintain their aspect ratio?
(A) height: auto; width: 100%;
(B) width: auto; height: 100%;
(C) height: fixed; width: fixed;
(D) object-fit: none;

49. Which CSS property ensures responsive videos fill their container while keeping aspect ratio?
(A) object-fit: fill;
(B) object-fit: contain;
(C) width: fixed; height: fixed;
(D) float: left;

50. Which RWD template technique allows a flexible and adaptive layout for all devices?
(A) Table-based layouts
(B) Fixed-width layouts
(C) Fluid grids
(D) Absolute positioning

51. Which media query ensures a layout changes when the device width is 768px or less?
(A) @media (max-width: 768px) { … }
(B) @media (min-width: 768px) { … }
(C) @media (width: 768px) { … }
(D) @media (screen-width: 768px) { … }

52. Which CSS property allows flex items to grow and shrink automatically based on available space in RWD layouts?
(A) flex: 1;
(B) flex: 0;
(C) flex-grow: 0;
(D) flex-basis: auto;

53. Which property allows a grid container to automatically adjust rows for responsive layouts?
(A) auto-rows
(B) grid-rows
(C) grid-row-size
(D) grid-auto-rows

54. Which RWD framework uses a 12-column grid system by default?
(A) Bootstrap
(B) Tailwind
(C) Foundation
(D) Materialize

55. Which CSS property ensures elements do not overflow their container in responsive designs?
(A) overflow: auto;
(B) overflow: hidden;
(C) overflow: visible;
(D) overflow: scroll;

56. Which property allows a grid item to span multiple rows in a responsive layout?
(A) grid-row: span 2;
(B) grid-span-row: 2;
(C) row-span: 2;
(D) grid-row-start: 2;

57. Which technique allows embedding responsive templates in a website?
(A) Using CSS classes and fluid layouts
(B) Using fixed tables
(C) Using absolute positioning
(D) Using static divs

58. Which property ensures buttons scale proportionally on different devices?
(A) height: 50px;
(B) width: fixed;
(C) max-width: 100%;
(D) float: left;

59. Which property ensures forms and inputs adjust for responsive layouts?
(A) flex-basis: fixed;
(B) width: 300px;
(C) width: 100%;
(D) height: 50px;