CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 130 · 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 is the text of this element?
   <h2 class="note" id="main">Hi</h2>
   CSS:
   h2 { color: black; }
   h2 { color: blue; } (a) yellow (b) blue (c) purple (d) black
2. 2.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 170px;
     padding: 15px;
     border: 2px solid black;
     margin: 0px;
   }
3. 3.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 18px;
     }
   }
4. 4.🖌️ Which CSS property centres a heading? (a) color (b) font-weight (c) font-size (d) text-align
5. 5.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 90px;
     padding: 30px;
     border: 3px solid black;
     margin: 10px;
   }
6. 6.💪 Which flexbox property sets space between boxes? (a) flex-direction (b) display: flex (c) justify-content (d) gap
7. 7.What does color do? (a) sets the letter colour (b) makes letters bigger (c) makes the text bold (d) centres a heading
8. 8.Which of these does JavaScript do? (a) makes a link (b) adds space around boxes (c) sets colours and fonts (d) counts down a timer
9. 9.🎯 Which element does the selector #intro style? (a) <div id="main"> (b) <span class="big"> (c) <div class="intro"> (d) <div id="intro">
10. 10.🌈 Which colour of light is strongest in rgb(217, 24, 44)? (a) green (b) blue (c) red
11. 11.✍️ What is the selector in this CSS rule?
    #top {
      font-weight: bold;
      padding: 8px;
    } (a) li (b) font-weight (c) #top (d) 8px
12. 12.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) green (c) black (d) blue
13. 13.Which of these is the content? (a) the line round the box (b) space inside the border (c) the text or picture (d) a solid or dotted edge
14. 14.⚖️ What colour is the text of this element?
    <p class="star" id="intro">Hi</p>
    CSS:
    #intro { color: white; }
    #intro { color: purple; } (a) white (b) black (c) orange (d) purple
15. 15.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
16. 16.🌈 Which colour is #ffff00? (a) black (b) yellow (c) white (d) bright green
17. 17.🧩 Which language shows a pop-up message? (a) HTML (b) JavaScript (c) CSS
18. 18.🧩 Which language makes a link? (a) JavaScript (b) CSS (c) HTML
19. 19.🖌️ Which CSS property sets the letter colour? (a) color (b) font-weight (c) text-align (d) background-color
20. 20.🌈 Which hex code is bright green? (a) #0000ff (b) #00ff00 (c) #ff00ff (d) #ffff00
21. 21.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 24px;
      }
    } (a) No (b) Yes
22. 22.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) packs boxes at the start (c) puts boxes in the middle (d) packs boxes at the end
23. 23.⚖️ What colour is the text of this element?
    <h1 class="red" id="top">Hi</h1>
    CSS:
    .red { color: purple; }
    h1 { color: green; } (a) orange (b) black (c) green (d) purple
24. 24.✍️ In color: blue; which part is the property? (a) ; (b) blue (c) color (d) :
25. 25.⚖️ What colour is the text of this element?
    <p class="note" id="end">Hi</p>
    CSS:
    p { color: blue; }
    .note { color: black; }
    #end { color: yellow; } (a) white (b) black (c) yellow (d) blue
26. 26.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
27. 27.What does font-family do? (a) centres a heading (b) picks the font style (c) colours behind the text (d) makes letters bigger
28. 28.🎯 What kind of selector is li? (a) a class selector (b) an id selector (c) an element selector
29. 29.True or false: HTML puts a picture on a page. (a) True (b) False
30. 30.✍️ What is the selector in this CSS rule?
    #top {
      background-color: yellow;
      margin: 10px;
      width: 300px;
      color: red;
    } (a) 10px (b) #top (c) background-color (d) li
31. 31.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 420px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 100px wide (no margins).
32. 32.True or false: CSS checks a quiz answer. (a) True (b) False
33. 33.✍️ What is the selector in this CSS rule?
    h1 {
      width: 300px;
      font-weight: bold;
    } (a) bold (b) width (c) h1 (d) p
34. 34.🌈 Which hex code is cyan? (a) #00ffff (b) #00ff00 (c) #ffff00 (d) #0000ff
35. 35.True or false: JavaScript gives the page structure. (a) False (b) True
36. 36.⚖️ What colour is the text of this element?
    <h1 class="star" id="end">Hi</h1>
    CSS:
    #end { color: purple; }
    #end { color: red; } (a) purple (b) white (c) red (d) orange
37. 37.What does justify-content: flex-end do? (a) puts boxes in the middle (b) packs boxes at the start (c) equal gaps, none at ends (d) packs boxes at the end
38. 38.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 290px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 50px wide (no margins).
39. 39.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) the first one (c) neither (d) the shorter one
40. 40.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    } (a) No (b) Yes

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