CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 205 · 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 language checks a quiz answer? (a) HTML (b) JavaScript (c) CSS
2. 2.📱 The screen is 700px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (min-width: 600px) {
     p {
       font-size: 32px;
     }
   } (a) Yes (b) No
3. 3.🖌️ What colour are the letters?
   p {
     text-align: left;
     background-color: purple;
     color: blue;
     font-size: 24px;
   } (a) purple (b) blue (c) green
4. 4.🎯 What kind of selector is .menu? (a) a class selector (b) an id selector (c) an element selector
5. 5.🎯 Which element does the selector #main style? (a) <div id="main"> (b) <div id="logo"> (c) <div class="main"> (d) <span class="box">
6. 6.🖌️ Which CSS property colours behind the text? (a) font-weight (b) font-family (c) background-color (d) color
7. 7.🌈 Which colour of light is strongest in rgb(53, 0, 212)? (a) red (b) green (c) blue
8. 8.🖌️ Which CSS property makes letters bigger? (a) font-size (b) text-align (c) font-weight (d) color
9. 9.✍️ Which property is set to 300px in this rule?
   p {
     font-size: 20px;
     width: 300px;
     background-color: yellow;
   } (a) font-style (b) color (c) 300px (d) width
10. 10.⚖️ What colour is the text of this element?
    <p class="big" id="top">Hi</p>
    CSS:
    #top { color: red; }
    .big { color: blue; } (a) blue (b) black (c) white (d) red
11. 11.📱 What does a media query check? (a) the screen width (b) the battery level (c) the page title (d) the time of day
12. 12.🌈 Which colour is #ff0000? (a) red (b) blue (c) bright green (d) magenta
13. 13.✍️ Which property is set to yellow in this rule?
    h1 {
      padding: 8px;
      background-color: yellow;
      width: 300px;
    } (a) padding (b) yellow (c) margin (d) background-color
14. 14.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) black (c) green (d) red
15. 15.🎯 Can many elements share the same class? (a) Yes (b) No
16. 16.🎯 What kind of selector is h1? (a) an element selector (b) a class selector (c) an id selector
17. 17.🎨 Which tag holds CSS inside the head? (a) <css> (b) <script> (c) <style> (d) <body>
18. 18.🧩 Which language gives the page structure? (a) CSS (b) HTML (c) JavaScript
19. 19.🎯 Which element does the selector .note style? (a) <h1 class="big"> (b) <h2 class="red"> (c) <h1 class="note"> (d) <h1 id="note">
20. 20.⚖️ What colour is the text of this element?
    <p class="red" id="top">Hi</p>
    CSS:
    .red { color: green; }
    .red { color: red; } (a) red (b) blue (c) green (d) yellow
21. 21.🎯 Which element does the selector h1 style? (a) <h1 class="note"> (b) <h2> (c) <div id="logo"> (d) <li class="note">
22. 22.🎯 Which element does the selector div style? (a) <h1 id="end"> (b) <span> (c) <div class="menu"> (d) <p class="menu">
23. 23.📱 Responsive design means a page ___. (a) is only for laptops (b) has no pictures (c) never changes (d) fits every screen
24. 24.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 170px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 60px wide (no margins).
25. 25.🎯 Which CSS selector matches this element?
    <span class="menu" id="end">Hello</span> (a) .note (b) .menu (c) #hero (d) #menu
26. 26.🔍 Which is the odd one out? (a) makes a form box (b) adds space around boxes (c) gives the page structure (d) makes a link
27. 27.📦 In the box model, which part is the gap round content? (a) padding (b) content (c) margin (d) border
28. 28.🌈 In #rrggbb, which colour do the last two digits give? (a) green (b) white (c) blue (d) red
29. 29.What does color do? (a) makes letters bigger (b) makes the text bold (c) centres a heading (d) sets the letter colour
30. 30.✍️ What value is given to font-weight in this rule?
    #top {
      padding: 8px;
      font-weight: bold;
    } (a) 2px solid (b) 300px (c) font-weight (d) bold
31. 31.🌈 Which colour is rgb(0, 0, 255)? (a) white (b) magenta (c) blue (d) bright green
32. 32.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 8px;
      }
    }
33. 33.🖌️ How big is the text, in px?
    li {
      text-align: right;
      background-color: yellow;
      color: black;
      font-size: 40px;
    }
34. 34.⚖️ What colour is the text of this element?
    <p class="big" id="intro">Hi</p>
    CSS:
    p { color: red; }
    p { color: yellow; } (a) blue (b) red (c) green (d) yellow
35. 35.⚖️ Which selector is the weakest? (a) a class selector (b) an element selector (c) an id selector
36. 36.🖌️ What colour are the letters?
    h2 {
      color: white;
      text-align: center;
      font-size: 24px;
      background-color: blue;
    } (a) white (b) black (c) blue
37. 37.What does font-size do? (a) colours behind the text (b) makes letters bigger (c) centres a heading (d) sets the letter colour
38. 38.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      margin: 10px;
      border: 2px solid;
    }
39. 39.✍️ How does a CSS comment start? (a) <!-- (b) // (c) # (d) /*
40. 40.🧩 Which language changes the text size? (a) CSS (b) JavaScript (c) HTML

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