CSS Examples & Practice
CSS Quiz
Ready to check what you know? This 15-question multiple-choice quiz covers selectors, the box model, colors, flexbox, grid, positioning and specificity. Read each question, pick your answer, then check the answer table below with a one-line explanation for every question.
Questions
- What does CSS stand for? (a) Computer Style Sheets (b) Cascading Style Sheets (c) Creative Style System (d) Colorful Style Sheets
- Which property changes the text color? (a) font-color (b) text-style (c) color (d) foreground
- Which selector targets an element by its id? (a) .id (b) #id (c) *id (d) @id
- In the box model, which property adds space INSIDE the border? (a) margin (b) padding (c) gap (d) border-spacing
- Which value of display removes an element from the layout entirely? (a) hidden (b) none (c) invisible (d) collapse
- Which property makes a flex container? (a) display: flex (b) flex: on (c) layout: flex (d) box: flex
- In flexbox, which property aligns items along the main axis? (a) align-items (b) justify-content (c) align-content (d) place-self
- How do you write a comment in CSS? (a) // comment (b) <!-- comment --> (c) /* comment */ (d) # comment
- Which unit is relative to the root element font size? (a) px (b) em (c) rem (d) pt
- Which position value positions relative to the nearest positioned ancestor? (a) static (b) relative (c) absolute (d) fixed
- What is the specificity winner among these? (a) an id selector (b) a class selector (c) an element selector (d) the universal selector
- Which property creates rounded corners? (a) corner-radius (b) border-radius (c) round (d) radius
- In CSS Grid, which property defines the columns? (a) grid-columns (b) grid-template-columns (c) columns (d) grid-cols
- Which pseudo-class styles a link the user is hovering? (a) :active (b) :focus (c) :hover (d) :visited
- Which rule makes styles apply only on screens up to 600px wide? (a) @media (max-width: 600px) (b) @screen 600 (c) @if width<600 (d) @responsive 600
Answers and explanations
| # | Answer | Why |
|---|---|---|
| 1 | (b) Cascading Style Sheets | CSS describes how HTML elements are displayed; styles cascade by source order and specificity. |
| 2 | (c) color | The color property sets the text (foreground) color; background-color sets the background. |
| 3 | (b) #id | A hash targets an id; a dot targets a class. |
| 4 | (b) padding | Padding is space inside the border; margin is space outside it. |
| 5 | (b) none | display:none removes the element and its box from the layout entirely. |
| 6 | (a) display: flex | This turns an element into a flex container so its children become flex items. |
| 7 | (b) justify-content | justify-content aligns items along the main axis; align-items works on the cross axis. |
| 8 | (c) /* comment */ | CSS uses slash-star comment syntax; HTML uses angle-bracket comments. |
| 9 | (c) rem | rem is relative to the root (html) font size; em is relative to the element's own font size. |
| 10 | (c) absolute | position:absolute positions relative to the nearest ancestor that is not static. |
| 11 | (a) an id selector | Ids have the highest specificity of these four, so they win. |
| 12 | (b) border-radius | border-radius rounds the corners of an element's box. |
| 13 | (b) grid-template-columns | It defines the number and size of columns in a grid container. |
| 14 | (c) :hover | The :hover pseudo-class applies while the pointer is over the element. |
| 15 | (a) @media (max-width: 600px) | A max-width media query applies styles at that width and below. |
💡
Scoring: 13-15 excellent, 9-12 solid, below 9 review the tutorial sections on selectors, the box model and flexbox, then try again.