DevAcademy

1. What does CSS stand for?

Creative Style SheetsCascading Style SheetsComputer Styling SystemColorful Style Sheets

2. What are the two main parts of a CSS rule?

Tag and attributeSelector and declaration blockElement and classProperty and unit

3. What does "cascading" refer to in CSS?

How styles scroll down the pageHow conflicting rules are resolved based on order, specificity, and importanceA type of CSS animationHow CSS files are loaded

4. Which method loads CSS from a separate .css file?

InlineInternalExternalEmbedded

5. Where is an internal stylesheet written?

In a style attribute on the elementInside a <style> tag in the documentIn a separate .css fileIn the URL

6. Why are inline styles generally discouraged?

They load slower than external CSSThey mix content with presentation and are hard to maintain/overrideBrowsers do not support themThey only work in Chrome

7. What separates a property from its value in a declaration?

A semicolonA colonA commaAn equals sign

8. What character ends a CSS declaration?

A periodA colonA semicolonA comma

9. How are CSS comments written?

// comment/* comment */# comment

10. Which selector targets every element with class="card"?

#card.card*cardcard

11. Which selector targets the single element with a given id?

.id-name#id-name[id-name]*id-name

12. How do you apply the same styles to h1, h2, and h3 without repeating the rule?

h1 h2 h3 { ... }h1, h2, h3 { ... }h1 + h2 + h3 { ... }h1 > h2 > h3 { ... }

13. Which value represents a fully transparent color in rgba()?

Alpha = 1Alpha = 0Alpha = 100Alpha = 255

14. What does HSL stand for?

Hue, Saturation, LightnessHighlight, Shade, LayerHorizontal, Style, LayoutHex, Style, Length

15. Which color format uses a six-digit code prefixed with #?

RGBHSLHexNamed

16. What is rem relative to?

The parent element’s font sizeThe root (<html>) element’s font sizeThe viewport widthThe browser default only

17. What is em relative to?

The root element’s font sizeThe viewport heightThe current element’s own font sizeA fixed 16px

18. What does 1vw represent?

1 pixel1% of the viewport width1% of the parent’s width1% of the root font size

19. What are the four layers of the box model, from inside out?

Margin, border, padding, contentContent, padding, border, marginPadding, content, margin, borderBorder, content, padding, margin

20. With the default box-sizing, does padding increase an element’s total rendered width?

No, neverYesOnly for imagesOnly with box-sizing: border-box

21. What does box-sizing: border-box do?

Removes all paddingMakes the specified width include padding and borderAdds a border to every elementDisables margins

22. Which property sets the boldness of text?

font-stylefont-weighttext-decorationfont-family

23. Why should font-family end with a generic fallback like sans-serif?

It is required by the CSS specIt ensures readable text even if none of the listed fonts are availableIt improves page load speedIt only affects headings

24. Which property controls spacing between lines of text?

letter-spacingline-heighttext-indentword-spacing

25. Which value makes a background image fully cover its box, cropping if necessary?

containcoverfillauto

26. Which property prevents a background image from tiling?

background-positionbackground-repeat: no-repeatbackground-sizebackground-clip

27. What is the benefit of setting a fallback background-color with an image?

It speeds up image loadingIt provides a reasonable look before the image loads or if it failsIt is required by CSSIt changes the image size

28. Which shorthand sets width, style, and color in one declaration?

border-styleborderoutlinebox-border

29. Which property rounds an element’s corners?

border-roundcorner-radiusborder-radiusradius

30. What border-radius value turns a square box into a circle?

10px25%50%100px

31. Which property adds space inside an element’s border?

marginpaddinggapspacing

32. What does margin: 10px 20px; set?

All sides to 10pxTop/bottom to 10px, left/right to 20pxTop to 10px, the rest to 20pxLeft to 10px, right to 20px

33. What does margin: 0 auto; do to a block element with a set width?

Removes all marginCenters it horizontallyCenters it verticallyStretches it to full width

34. What does display: none do to an element?

Makes it transparent but keeps its spaceRemoves it from the layout entirely, taking no spaceMakes it inlineDisables its CSS

35. Which display value flows inline but accepts width and height?

inlineblockinline-blockflex

36. What is the difference between display: none and visibility: hidden?

There is no differencevisibility: hidden still reserves the element’s layout spacedisplay: none only works on imagesvisibility: hidden removes the element from the DOM

CSS Beginner Practice

Quick Quiz