DevAcademy

1. Which position value is the default for every element?

relativestaticabsolutesticky

2. What is an absolutely positioned element positioned relative to?

Always the viewportIts nearest ancestor with a non-static positionThe <body> element onlyIts direct parent, always

3. How does position: sticky behave?

Exactly like fixed at all timesExactly like static at all timesLike relative until a scroll threshold, then like fixedIt removes the element from the page

4. Which property turns a container’s children into flex items?

flex: 1display: flexflex-direction: rowposition: flex

5. Which property centers flex items along the main axis?

align-itemsjustify-contentflex-wrapgap

6. What does flex: 1 do to a flex item?

Fixes its size permanentlyAllows it to grow and fill available spaceRemoves it from the flex layoutCenters it vertically only

7. What does the fr unit represent in a grid?

A fixed number of pixelsA fraction of the available space in the grid containerA percentage of the viewportThe number of rows

8. Which property lets an item span multiple columns?

grid-gapgrid-columngrid-templategrid-area-span

9. When is CSS Grid generally preferred over Flexbox?

When aligning a single row of itemsWhen you need to control rows and columns together, two-dimensionallyGrid should always be used instead of FlexboxOnly for text styling

10. Which overflow value clips extra content without showing a scrollbar?

visiblehiddenautoscroll

11. Which overflow value only shows a scrollbar when content actually overflows?

scrollhiddenautovisible

12. Which three properties combine to truncate text with an ellipsis?

overflow: hidden, text-overflow: ellipsis, white-space: nowrapdisplay: none, visibility: hidden, opacity: 0overflow: scroll, text-align: center, font-size: 12pxwhite-space: pre, overflow: visible, text-overflow: clip

13. Does z-index affect elements with position: static?

Yes, alwaysNo, it has no effectOnly on imagesOnly in Chrome

14. What can create a new stacking context besides positioning with z-index?

coloropacity less than 1font-sizetext-align

15. Why might a child with z-index: 9999 still appear behind another element?

z-index only works on textIts parent may be in a separate stacking context with a lower z-indexz-index values above 100 are ignoredIt needs !important

16. Which pseudo-class matches an element while the pointer is over it?

:active:hover:focus:visited

17. Which pseudo-class selects every other list item for a zebra-stripe effect?

:nth-child(odd):first-child:not(li):checked

18. Why is styling :focus important, not just :hover?

It looks nicerKeyboard and screen-reader users rely on visible focus indicators:focus is required by CSS syntaxIt has no real purpose

19. How many colons do pseudo-elements use, unlike pseudo-classes?

OneTwoThreeZero

20. Which property is required for ::before or ::after to render anything?

displaycontentpositioncolor

21. Why should ::before/::after avoid holding essential information?

They are slower to renderThe content isn’t part of the real DOM and may not be reliably read by assistive technologyThey only work on headingsBrowsers block their content by default

22. Which of these has the highest specificity?

A type selector like divA class selector like .cardAn ID selector like #headerA pseudo-element like ::before

23. When two rules have equal specificity, which one wins?

The shorter oneThe one that appears later in the stylesheetThe one with more declarationsNeither applies

24. Why should !important be used sparingly?

It is deprecated and ignored by browsersIt overrides normal specificity and makes future overrides harderIt only works on class selectorsIt slows down page rendering significantly

25. Which combinator selects only direct children?

A BA > BA + BA ~ B

26. Which combinator selects the single element immediately following another?