CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 368 · 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 is the odd one out? (a) reacts to a button click (b) checks a quiz answer (c) counts down a timer (d) gives the page structure
2. 2.🌈 Which colour is #ffffff? (a) white (b) red (c) magenta (d) yellow
3. 3.✍️ CSS declarations go inside which brackets? (a) ( ) (b) [ ] (c) { } (d) < >
4. 4.🌈 Which hex code is white? (a) #ff00ff (b) #00ffff (c) #000000 (d) #ffffff
5. 5.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) flex-start (c) center (d) space-between
6. 6.💪 Which justify-content value equal gaps, none at ends? (a) space-between (b) flex-start (c) center (d) flex-end
7. 7.🌈 Which hex code is bright green? (a) #ff00ff (b) #ffffff (c) #0000ff (d) #00ff00
8. 8.🎨 What does CSS stand for? (a) Cascading Style Sheets (b) Computer Style Sheets (c) Colourful Site Styles (d) Creative Sheet System
9. 9.Which of these does CSS do? (a) sets colours and fonts (b) makes headings and lists (c) makes a link (d) checks a quiz answer
10. 10.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) black (c) red (d) green
11. 11.True or false: padding is space inside the border. (a) False (b) True
12. 12.🎯 Which CSS selector matches this element?
    <h1 class="red" id="logo">Hello</h1> (a) #end (b) h2 (c) .box (d) h1
13. 13.✍️ In color: blue; which part is the value? (a) : (b) blue (c) color (d) ;
14. 14.✍️ How does a CSS comment start? (a) <!-- (b) // (c) /* (d) #
15. 15.True or false: CSS adds space around boxes. (a) True (b) False
16. 16.🎯 Which CSS selector matches this element?
    <p class="menu" id="end">Hello</p> (a) p (b) .note (c) #hero (d) #menu
17. 17.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 14px;
      }
    }
18. 18.🌈 In #00000b the blue part is the hex number 0b. What is it as a normal number?
19. 19.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    }
20. 20.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 3 (c) 2 (d) 4
21. 21.🎨 Which tag holds CSS inside the head? (a) <script> (b) <css> (c) <style> (d) <body>
22. 22.⚖️ What colour is the text of this element?
    <h2 class="big" id="hero">Hi</h2>
    CSS:
    h2 { color: blue; }
    #hero { color: yellow; } (a) green (b) blue (c) yellow (d) black
23. 23.✍️ In color: blue; which part is the property? (a) ; (b) : (c) blue (d) color
24. 24.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
25. 25.🧩 Which language gives the page structure? (a) HTML (b) JavaScript (c) CSS
26. 26.🖌️ Which CSS property sets the letter colour? (a) color (b) font-weight (c) font-family (d) background-color
27. 27.True or false: p is an element selector. (a) True (b) False
28. 28.⚖️ What colour is the text of this element?
    <p class="box" id="top">Hi</p>
    CSS:
    p { color: red; }
    .box { color: orange; }
    #top { color: black; } (a) orange (b) green (c) red (d) black
29. 29.True or false: CSS shows a pop-up message. (a) True (b) False
30. 30.Which of these does JavaScript do? (a) makes headings and lists (b) rounds box corners (c) shows a pop-up message (d) makes a link
31. 31.🖌️ What colour is behind the letters?
    h2 {
      background-color: red;
      text-align: right;
      font-size: 36px;
      color: yellow;
    } (a) green (b) red (c) yellow
32. 32.True or false: padding is a solid or dotted edge. (a) False (b) True
33. 33.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 90px;
      padding: 30px;
      border: 5px solid black;
      margin: 5px;
    }
34. 34.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 140px;
      padding: 25px;
      border: 5px solid black;
      margin: 0px;
    }
35. 35.🌈 Which colour is rgb(255, 255, 255)? (a) red (b) white (c) magenta (d) yellow
36. 36.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 370px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 40px wide (no margins).
37. 37.What does justify-content: space-between 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
38. 38.🔍 Which is the odd one out? (a) puts a picture on a page (b) gives the page structure (c) sets colours and fonts (d) makes headings and lists
39. 39.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 20px;
      }
    } (a) Yes (b) No
40. 40.🖌️ What colour is behind the letters?
    p {
      font-size: 12px;
      color: orange;
      text-align: right;
      background-color: purple;
    } (a) purple (b) yellow (c) orange

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