CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 610 · 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 colour of light is strongest in rgb(30, 213, 25)? (a) red (b) green (c) blue
2. 2.🖌️ What colour are the letters?
   p {
     background-color: red;
     color: green;
     text-align: left;
     font-size: 16px;
   } (a) yellow (b) green (c) red
3. 3.Which of these is the border? (a) a solid or dotted edge (b) space outside the border (c) the gap to other boxes (d) the gap round content
4. 4.🌈 In #rrggbb, which colour do the last two digits give? (a) white (b) red (c) green (d) blue
5. 5.✍️ Which sign goes between a property and its value? (a) : (b) - (c) ; (d) =
6. 6.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 18px;
     }
   }
7. 7.🌈 In #2f0000 the red part is the hex number 2f. What is it as a normal number?
8. 8.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
9. 9.🎨 One CSS file can style how many pages? (a) only one word (b) only one image (c) many pages (d) no pages
10. 10.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 520px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 100px wide (no margins).
11. 11.🔍 Which is the odd one out? (a) makes headings and lists (b) makes a form box (c) sets colours and fonts (d) gives the page structure
12. 12.🎯 Which element does the selector p style? (a) <h1> (b) <h2 class="note"> (c) <li id="intro"> (d) <p class="note">
13. 13.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 150px;
      padding: 10px;
      border: 4px solid black;
      margin: 15px;
    }
14. 14.🌈 What is the biggest number one colour can have in rgb()? (a) 99 (b) 255 (c) 1000 (d) 100
15. 15.🎯 Which sign starts an id selector? (a) @ (b) . (c) # (d) &
16. 16.🧩 Which language changes the page live? (a) HTML (b) JavaScript (c) CSS
17. 17.🔍 Which is the odd one out? (a) reacts to a button click (b) checks a quiz answer (c) counts down a timer (d) lays out the page
18. 18.⚖️ What colour is the text of this element?
    <h2 class="box" id="main">Hi</h2>
    CSS:
    #main { color: orange; }
    #main { color: green; } (a) yellow (b) green (c) red (d) orange
19. 19.Which of these does HTML do? (a) counts down a timer (b) changes the page live (c) puts a picture on a page (d) reacts to a button click
20. 20.🌈 Which colour is #0000ff? (a) white (b) red (c) black (d) blue
21. 21.✍️ Which property is set to 20px in this rule?
    li {
      width: 300px;
      margin: 10px;
      font-size: 20px;
    } (a) font-size (b) background-color (c) text-align (d) 20px
22. 22.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      margin: 10px;
      color: red;
      border: 2px solid;
      font-style: italic;
    }
23. 23.What does font-size do? (a) sets the letter colour (b) picks the font style (c) colours behind the text (d) makes letters bigger
24. 24.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 16px;
      }
    }
25. 25.What does justify-content: space-between do? (a) packs boxes at the start (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the end
26. 26.Which of these is padding? (a) space inside the border (b) space outside the border (c) a solid or dotted edge (d) the gap to other boxes
27. 27.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 20px;
      }
    }
28. 28.🎯 What kind of selector is #main? (a) a class selector (b) an element selector (c) an id selector
29. 29.⚖️ What colour is the text of this element?
    <p class="menu" id="main">Hi</p>
    CSS:
    #main { color: orange; }
    p { color: yellow; } (a) orange (b) yellow (c) white (d) green
30. 30.🖌️ Which CSS property centres a heading? (a) font-weight (b) color (c) font-family (d) text-align
31. 31.True or false: JavaScript gives the page structure. (a) False (b) True
32. 32.What does background-color do? (a) makes the text bold (b) colours behind the text (c) sets the letter colour (d) centres a heading
33. 33.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 30px;
      }
    }
34. 34.🎯 Which CSS selector matches this element?
    <div class="big" id="top">Hello</div> (a) .red (b) span (c) #intro (d) div
35. 35.✍️ What is the selector in this CSS rule?
    h1 {
      margin: 10px;
      font-weight: bold;
    } (a) bold (b) p (c) margin (d) h1
36. 36.⚖️ What colour is the text of this element?
    <p class="note" id="main">Hi</p>
    CSS:
    #main { color: purple; }
    #main { color: yellow; } (a) purple (b) white (c) yellow (d) blue
37. 37.🖌️ Which CSS property sets the letter colour? (a) color (b) text-align (c) font-family (d) background-color
38. 38.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 12px;
      }
    }
39. 39.🎯 What kind of selector is .card? (a) an element selector (b) an id selector (c) a class selector
40. 40.🌈 Which colour of light is strongest in rgb(29, 181, 55)? (a) blue (b) green (c) red

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