CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 487 · 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.🖌️ What colour are the letters?
   p {
     background-color: yellow;
     font-size: 24px;
     text-align: center;
     color: blue;
   } (a) yellow (b) red (c) blue
2. 2.🧩 Which language lays out the page? (a) HTML (b) CSS (c) JavaScript
3. 3.Which of these does JavaScript do? (a) makes headings and lists (b) gives the page structure (c) adds space around boxes (d) shows a pop-up message
4. 4.What does justify-content: center do? (a) packs boxes at the end (b) packs boxes at the start (c) equal gaps, none at ends (d) puts boxes in the middle
5. 5.⚖️ What colour is the text of this element?
   <h1 class="note" id="logo">Hi</h1>
   CSS:
   .note { color: black; }
   h1 { color: red; } (a) white (b) red (c) black (d) purple
6. 6.📱 What does a media query check? (a) the time of day (b) the page title (c) the battery level (d) the screen width
7. 7.✍️ CSS declarations go inside which brackets? (a) < > (b) [ ] (c) ( ) (d) { }
8. 8.🔍 Which is the odd one out? (a) changes the text size (b) makes headings and lists (c) lays out the page (d) adds space around boxes
9. 9.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 14px;
     }
   }
10. 10.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the title tag (c) the br tag (d) the viewport meta tag
11. 11.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 6px;
      }
    }
12. 12.🌈 Which colour is #00ffff? (a) black (b) white (c) cyan (d) red
13. 13.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 26px;
      }
    } (a) Yes (b) No
14. 14.What does justify-content: space-between do? (a) puts boxes in the middle (b) packs boxes at the end (c) packs boxes at the start (d) equal gaps, none at ends
15. 15.⚖️ What colour is the text of this element?
    <p class="menu" id="hero">Hi</p>
    CSS:
    p { color: purple; }
    p { color: red; } (a) purple (b) red (c) white (d) black
16. 16.⚖️ What colour is the text of this element?
    <p class="note" id="hero">Hi</p>
    CSS:
    #hero { color: black; }
    #hero { color: white; } (a) black (b) green (c) yellow (d) white
17. 17.🌈 Which hex code is white? (a) #000000 (b) #ffffff (c) #0000ff (d) #ff00ff
18. 18.🎯 Which CSS selector matches this element?
    <li class="box" id="main">Hello</li> (a) #box (b) li (c) .star (d) div
19. 19.What does color do? (a) picks the font style (b) makes letters bigger (c) makes the text bold (d) sets the letter colour
20. 20.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 260px;
      justify-content: center;
    }
    Inside are 2 boxes, each 60px wide (no margins).
21. 21.True or false: h1 is an element selector. (a) False (b) True
22. 22.True or false: CSS adds space around boxes. (a) False (b) True
23. 23.🌈 In #00008b the blue part is the hex number 8b. What is it as a normal number?
24. 24.💪 Which justify-content value puts boxes in the middle? (a) flex-end (b) center (c) space-between (d) flex-start
25. 25.🌈 Hex digits go 0 to 9, then A to which letter? (a) F (b) Z (c) J (d) G
26. 26.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) center (c) space-between (d) flex-end
27. 27.✍️ Which property is set to 10px in this rule?
    .note {
      font-size: 20px;
      margin: 10px;
    } (a) 10px (b) padding (c) font-weight (d) margin
28. 28.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 200px;
      padding: 20px;
      border: 5px solid black;
      margin: 10px;
    }
29. 29.🧩 Which language makes a link? (a) JavaScript (b) HTML (c) CSS
30. 30.🎯 What kind of selector is #end? (a) a class selector (b) an id selector (c) an element selector
31. 31.🌈 What is the biggest number one colour can have in rgb()? (a) 99 (b) 1000 (c) 255 (d) 100
32. 32.🎯 Which sign starts an id selector? (a) & (b) @ (c) # (d) .
33. 33.🌈 Which colour of light is strongest in rgb(55, 213, 121)? (a) red (b) blue (c) green
34. 34.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      padding: 8px;
      font-weight: bold;
    }
35. 35.🎯 Which element does the selector .star style? (a) <p class="star"> (b) <p id="star"> (c) <p class="menu"> (d) <h1 class="note">
36. 36.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 440px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 100px wide (no margins).
37. 37.🎯 What kind of selector is .big? (a) an element selector (b) an id selector (c) a class selector
38. 38.🖌️ Which CSS property centres a heading? (a) color (b) background-color (c) font-size (d) text-align
39. 39.📱 min-width: 800px applies when the screen is ___. (a) exactly 100px (b) turned off (c) 800px or wider (d) 800px or narrower
40. 40.🖌️ What colour is behind the letters?
    h1 {
      text-align: center;
      font-size: 20px;
      background-color: red;
      color: blue;
    } (a) blue (b) orange (c) red

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