CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 328 · 40 questions

Code tip (Rule, then maths): Find the topic: syntax, selectors, properties, colours, box model, cascade, flexbox or media queries. Decide which rule or property applies to the element. For sizes, write the sum down: both sides for the box model, free space for flexbox.

1. 1.💪 Which flexbox property spaces boxes along a row? (a) display: flex (b) flex-direction (c) align-items (d) justify-content
2. 2.🌈 Which colour is #ff00ff? (a) bright green (b) black (c) yellow (d) magenta
3. 3.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 2 (b) 3 (c) 4 (d) 6
4. 4.🌈 Which colour is #ffff00? (a) yellow (b) white (c) cyan (d) red
5. 5.🌈 Which colour is #000000? (a) blue (b) black (c) bright green (d) magenta
6. 6.🎯 Can many elements share the same class? (a) No (b) Yes
7. 7.True or false: #end is an id selector. (a) True (b) False
8. 8.True or false: #hero is an id selector. (a) False (b) True
9. 9.🌈 In #rrggbb, which colour do the last two digits give? (a) white (b) blue (c) red (d) green
10. 10.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      background-color: yellow;
      margin: 10px;
      color: red;
    }
11. 11.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
12. 12.Which of these is padding? (a) the gap to other boxes (b) the line round the box (c) space inside the border (d) space outside the border
13. 13.💪 Which justify-content value puts boxes in the middle? (a) flex-start (b) center (c) space-between (d) flex-end
14. 14.🌈 Which colour is #ff0000? (a) magenta (b) red (c) white (d) bright green
15. 15.🧩 Which language makes headings and lists? (a) HTML (b) CSS (c) JavaScript
16. 16.✍️ In color: blue; which part is the value? (a) blue (b) ; (c) : (d) color
17. 17.🧩 Which language rounds box corners? (a) JavaScript (b) HTML (c) CSS
18. 18.⚖️ What colour is the text of this element?
    <h2 class="box" id="main">Hi</h2>
    CSS:
    #main { color: red; }
    #main { color: white; } (a) red (b) yellow (c) black (d) white
19. 19.🎯 What kind of selector is .menu? (a) a class selector (b) an id selector (c) an element selector
20. 20.What does font-weight do? (a) sets the letter colour (b) centres a heading (c) makes the text bold (d) makes letters bigger
21. 21.🎯 What kind of selector is .star? (a) an id selector (b) an element selector (c) a class selector
22. 22.🎯 Which CSS selector matches this element?
    <p class="red" id="main">Hello</p> (a) #logo (b) #red (c) .main (d) #main
23. 23.⚖️ Which selector is the strongest? (a) a class selector (b) an element selector (c) an id selector
24. 24.💪 Which justify-content value packs boxes at the end? (a) center (b) flex-end (c) flex-start (d) space-between
25. 25.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) turned off (c) 600px or wider (d) exactly 1000px
26. 26.Which of these is the border? (a) the gap round content (b) the text or picture (c) space outside the border (d) the line round the box
27. 27.✍️ Which property is set to red in this rule?
    .note {
      color: red;
      width: 300px;
      text-align: center;
      margin: 10px;
    } (a) font-size (b) text-align (c) color (d) red
28. 28.📦 In the box model, which part is the gap round content? (a) border (b) padding (c) content (d) margin
29. 29.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 160px;
      padding: 25px;
      border: 1px solid black;
      margin: 5px;
    }
30. 30.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 20px;
      }
    } (a) No (b) Yes
31. 31.✍️ Which sign ends each CSS declaration? (a) . (b) ; (c) , (d) :
32. 32.True or false: margin is the gap to other boxes. (a) False (b) True
33. 33.✍️ Which property is set to 20px in this rule?
    h2 {
      width: 300px;
      font-size: 20px;
    } (a) text-align (b) font-size (c) 20px (d) background-color
34. 34.✍️ CSS declarations go inside which brackets? (a) ( ) (b) < > (c) { } (d) [ ]
35. 35.✍️ What is the selector in this CSS rule?
    #top {
      font-style: italic;
      color: red;
      width: 300px;
      border: 2px solid;
    } (a) font-style (b) #top (c) li (d) red
36. 36.What does background-color do? (a) picks the font style (b) centres a heading (c) colours behind the text (d) sets the letter colour
37. 37.🎯 Which element does the selector h1 style? (a) <h2> (b) <li class="big"> (c) <h1 class="big"> (d) <div id="main">
38. 38.⚖️ What colour is the text of this element?
    <h1 class="note" id="main">Hi</h1>
    CSS:
    #main { color: green; }
    .note { color: blue; }
    h1 { color: white; } (a) blue (b) white (c) green (d) yellow
39. 39.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 8px;
      }
    } (a) Yes (b) No
40. 40.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes

Free html and css lessons, practice and worksheets at talentjr.in/html-css-for-kids