CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 399 · 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 of these does HTML do? (a) changes the page live (b) lays out the page (c) changes the text size (d) makes a form box
2. 2.📱 The screen is 1366px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 10px;
     }
   } (a) No (b) Yes
3. 3.🌈 Which colour is #ffffff? (a) blue (b) bright green (c) cyan (d) white
4. 4.📱 The screen is 414px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 20px;
     }
   } (a) No (b) Yes
5. 5.✍️ CSS declarations go inside which brackets? (a) [ ] (b) < > (c) { } (d) ( )
6. 6.✍️ Which sign ends each CSS declaration? (a) : (b) , (c) . (d) ;
7. 7.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
8. 8.🖌️ What colour is behind the letters?
   h2 {
     color: white;
     text-align: left;
     background-color: red;
     font-size: 24px;
   } (a) red (b) black (c) white
9. 9.📦 In the box model, which part is space inside the border? (a) padding (b) margin (c) border (d) content
10. 10.🌈 Which hex code is yellow? (a) #0000ff (b) #00ff00 (c) #ff0000 (d) #ffff00
11. 11.⚖️ What colour is the text of this element?
    <p class="note" id="hero">Hi</p>
    CSS:
    p { color: red; }
    p { color: yellow; } (a) yellow (b) blue (c) green (d) red
12. 12.What does color do? (a) picks the font style (b) makes letters bigger (c) sets the letter colour (d) centres a heading
13. 13.📦 In the box model, which part is a solid or dotted edge? (a) border (b) padding (c) content (d) margin
14. 14.Which of these is padding? (a) the line round the box (b) space inside the border (c) a solid or dotted edge (d) the gap to other boxes
15. 15.🖌️ What colour are the letters?
    li {
      color: yellow;
      background-color: purple;
      text-align: right;
      font-size: 32px;
    } (a) blue (b) yellow (c) purple
16. 16.🌈 Which hex code is blue? (a) #00ff00 (b) #0000ff (c) #ffff00 (d) #ffffff
17. 17.🌈 Which colour is rgb(0, 255, 0)? (a) yellow (b) magenta (c) red (d) bright green
18. 18.🌈 Which colour is #00ff00? (a) red (b) white (c) bright green (d) black
19. 19.🖌️ What colour are the letters?
    p {
      font-size: 40px;
      color: blue;
      text-align: center;
      background-color: green;
    } (a) green (b) red (c) blue
20. 20.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) neither (c) the shorter one (d) the later one
21. 21.📦 In the box model, which part is the gap round content? (a) padding (b) content (c) border (d) margin
22. 22.⚖️ What colour is the text of this element?
    <p class="note" id="end">Hi</p>
    CSS:
    p { color: red; }
    p { color: orange; } (a) red (b) green (c) orange (d) blue
23. 23.⚖️ What colour is the text of this element?
    <p class="menu" id="hero">Hi</p>
    CSS:
    p { color: orange; }
    p { color: yellow; } (a) orange (b) yellow (c) black (d) blue
24. 24.🌈 Which colour is rgb(255, 0, 255)? (a) red (b) blue (c) black (d) magenta
25. 25.🌈 Which colour of light is strongest in rgb(181, 121, 9)? (a) red (b) green (c) blue
26. 26.🔍 Which is the odd one out? (a) lays out the page (b) rounds box corners (c) changes the text size (d) changes the page live
27. 27.🧩 Which language adds space around boxes? (a) CSS (b) JavaScript (c) HTML
28. 28.🎨 Which tag holds CSS inside the head? (a) <body> (b) <css> (c) <script> (d) <style>
29. 29.What does background-color do? (a) sets the letter colour (b) centres a heading (c) colours behind the text (d) makes letters bigger
30. 30.⚖️ What colour is the text of this element?
    <h2 class="note" id="end">Hi</h2>
    CSS:
    #end { color: black; }
    .note { color: purple; }
    h2 { color: yellow; } (a) purple (b) yellow (c) red (d) black
31. 31.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 30px;
      }
    }
32. 32.🧩 Which language lays out the page? (a) HTML (b) JavaScript (c) CSS
33. 33.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 28px;
      }
    }
34. 34.What does text-align do? (a) sets the letter colour (b) centres a heading (c) colours behind the text (d) picks the font style
35. 35.What does justify-content: space-between do? (a) packs boxes at the start (b) puts boxes in the middle (c) equal gaps, none at ends (d) packs boxes at the end
36. 36.🌈 Which colour of light is strongest in rgb(208, 32, 32)? (a) blue (b) green (c) red
37. 37.✍️ What is the selector in this CSS rule?
    .box {
      font-style: italic;
      margin: 10px;
      width: 300px;
    } (a) .box (b) 10px (c) font-style (d) h2
38. 38.💪 Which flexbox property turns on flexbox? (a) display: flex (b) justify-content (c) gap (d) flex-direction
39. 39.✍️ What is the selector in this CSS rule?
    #top {
      font-size: 20px;
      text-align: center;
    } (a) center (b) font-size (c) #top (d) li
40. 40.🌈 Which colour of light is strongest in rgb(120, 182, 139)? (a) red (b) green (c) blue

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