CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 550 · 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.✍️ In color: blue; which part is the value? (a) blue (b) : (c) color (d) ;
2. 2.🎨 A CSS file usually ends with which extension? (a) .html (b) .js (c) .css (d) .png
3. 3.True or false: JavaScript puts a picture on a page. (a) True (b) False
4. 4.🎯 Which element does the selector li style? (a) <div> (b) <p id="hero"> (c) <span class="big"> (d) <li class="big">
5. 5.📱 min-width: 800px applies when the screen is ___. (a) exactly 100px (b) turned off (c) 800px or wider (d) 800px or narrower
6. 6.💪 Which flexbox property spaces boxes along a row? (a) flex-direction (b) display: flex (c) justify-content (d) gap
7. 7.✍️ Which property is set to bold in this rule?
   .box {
     background-color: yellow;
     font-weight: bold;
     width: 300px;
   } (a) bold (b) border (c) width (d) font-weight
8. 8.🎯 Which sign starts an id selector? (a) @ (b) & (c) # (d) .
9. 9.🖌️ How big is the text, in px?
   h1 {
     color: black;
     font-size: 40px;
     background-color: orange;
     text-align: left;
   }
10. 10.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 24px;
      }
    }
11. 11.💪 Which flexbox property picks row or column? (a) flex-direction (b) justify-content (c) align-items (d) gap
12. 12.🌈 Which colour is rgb(255, 255, 0)? (a) white (b) blue (c) yellow (d) magenta
13. 13.What does font-family do? (a) centres a heading (b) picks the font style (c) colours behind the text (d) sets the letter colour
14. 14.⚖️ Which selector is the weakest? (a) a class selector (b) an element selector (c) an id selector
15. 15.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) space-between (c) center (d) flex-end
16. 16.🌈 Which hex code is bright green? (a) #00ff00 (b) #ff0000 (c) #000000 (d) #00ffff
17. 17.True or false: the content is space inside the border. (a) False (b) True
18. 18.Which of these is the border? (a) space inside the border (b) space outside the border (c) the gap round content (d) the line round the box
19. 19.📦 In the box model, which part is the gap to other boxes? (a) content (b) padding (c) border (d) margin
20. 20.🌈 Which colour is #000000? (a) white (b) black (c) cyan (d) magenta
21. 21.🖌️ What colour is behind the letters?
    p {
      text-align: left;
      color: green;
      font-size: 20px;
      background-color: yellow;
    } (a) green (b) blue (c) yellow
22. 22.✍️ What value is given to color in this rule?
    li {
      color: red;
      padding: 8px;
    } (a) center (b) red (c) color (d) 20px
23. 23.💪 Which flexbox property lines boxes up across? (a) justify-content (b) flex-direction (c) gap (d) align-items
24. 24.⚖️ What colour is the text of this element?
    <h2 class="box" id="intro">Hi</h2>
    CSS:
    .box { color: orange; }
    .box { color: white; } (a) orange (b) white (c) black (d) purple
25. 25.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) black (c) red (d) blue
26. 26.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the br tag (c) the hr tag (d) the viewport meta tag
27. 27.⚖️ What colour is the text of this element?
    <h2 class="note" id="top">Hi</h2>
    CSS:
    #top { color: purple; }
    h2 { color: red; } (a) white (b) red (c) purple (d) green
28. 28.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      padding: 8px;
      width: 300px;
      background-color: yellow;
      font-style: italic;
    }
29. 29.✍️ What value is given to font-weight in this rule?
    body {
      color: red;
      font-weight: bold;
    } (a) 300px (b) 2px solid (c) bold (d) font-weight
30. 30.✍️ What is the selector in this CSS rule?
    #top {
      font-weight: bold;
      font-style: italic;
      border: 2px solid;
    } (a) li (b) #top (c) font-weight (d) italic
31. 31.✍️ What is the selector in this CSS rule?
    p {
      background-color: yellow;
      font-size: 20px;
    } (a) 20px (b) .note (c) background-color (d) p
32. 32.What does justify-content: center do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the start (d) packs boxes at the end
33. 33.📱 What does a media query check? (a) the battery level (b) the screen width (c) the time of day (d) the page title
34. 34.✍️ What value is given to font-style in this rule?
    p {
      border: 2px solid;
      font-style: italic;
    } (a) font-style (b) 20px (c) italic (d) red
35. 35.Which of these is padding? (a) a solid or dotted edge (b) the text or picture (c) the gap round content (d) space outside the border
36. 36.⚖️ Which selector is the strongest? (a) an element selector (b) an id selector (c) a class selector
37. 37.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      font-style: italic;
    }
38. 38.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      text-align: center;
      padding: 8px;
    }
39. 39.True or false: margin is the line round the box. (a) False (b) True
40. 40.🧩 Which language reacts to a button click? (a) CSS (b) JavaScript (c) HTML

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