CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 744 · 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.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 16px;
     }
   }
2. 2.📱 max-width: 600px applies when the screen is ___. (a) turned off (b) 600px or wider (c) exactly 1000px (d) 600px or narrower
3. 3.🔍 Which is the odd one out? (a) lays out the page (b) changes the text size (c) checks a quiz answer (d) sets colours and fonts
4. 4.Which of these is padding? (a) the text or picture (b) the line round the box (c) the gap to other boxes (d) space inside the border
5. 5.Which of these is the border? (a) space inside the border (b) a solid or dotted edge (c) the gap to other boxes (d) the gap round content
6. 6.🌈 In #00001f the blue part is the hex number 1f. What is it as a normal number?
7. 7.📱 The screen is 1366px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 6px;
     }
   } (a) No (b) Yes
8. 8.📱 The screen is 540px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 22px;
     }
   } (a) Yes (b) No
9. 9.🔍 Which is the odd one out? (a) adds space around boxes (b) reacts to a button click (c) counts down a timer (d) checks a quiz answer
10. 10.🌈 Which colour is rgb(0, 0, 255)? (a) black (b) blue (c) bright green (d) cyan
11. 11.🎨 Which tag holds CSS inside the head? (a) <body> (b) <style> (c) <css> (d) <script>
12. 12.🧩 Which language makes a link? (a) CSS (b) HTML (c) JavaScript
13. 13.🌈 Which hex code is bright green? (a) #0000ff (b) #ff0000 (c) #00ff00 (d) #000000
14. 14.🎯 Which element does the selector #top style? (a) <span id="top"> (b) <span class="top"> (c) <span id="intro"> (d) <p class="big">
15. 15.🧩 Which language makes a form box? (a) JavaScript (b) HTML (c) CSS
16. 16.🌈 In #00000d the blue part is the hex number 0d. What is it as a normal number?
17. 17.What does justify-content: flex-start 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
18. 18.⚖️ Which selector is the weakest? (a) a class selector (b) an element selector (c) an id selector
19. 19.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 30px;
      }
    }
20. 20.💪 Which flexbox property spaces boxes along a row? (a) justify-content (b) gap (c) align-items (d) display: flex
21. 21.📦 In the box model, which part is the gap to other boxes? (a) border (b) padding (c) content (d) margin
22. 22.✍️ What is the selector in this CSS rule?
    .box {
      font-weight: bold;
      font-style: italic;
      border: 2px solid;
      margin: 10px;
    } (a) font-weight (b) h2 (c) italic (d) .box
23. 23.📱 Responsive design means a page ___. (a) is only for laptops (b) fits every screen (c) has no pictures (d) never changes
24. 24.What does background-color do? (a) picks the font style (b) colours behind the text (c) makes letters bigger (d) sets the letter colour
25. 25.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 50px;
      padding: 5px;
      border: 5px solid black;
      margin: 0px;
    }
26. 26.💪 Which justify-content value equal gaps, none at ends? (a) center (b) flex-end (c) flex-start (d) space-between
27. 27.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 100px;
      padding: 5px;
      border: 1px solid black;
      margin: 15px;
    }
28. 28.✍️ What is the selector in this CSS rule?
    #top {
      border: 2px solid;
      font-style: italic;
      background-color: yellow;
      margin: 10px;
    } (a) italic (b) #top (c) border (d) li
29. 29.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 60px;
      padding: 5px;
      border: 2px solid black;
      margin: 20px;
    }
30. 30.🎯 Which sign starts an id selector? (a) . (b) # (c) & (d) @
31. 31.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 70px;
      padding: 15px;
      border: 1px solid black;
      margin: 0px;
    }
32. 32.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 14px;
      }
    } (a) No (b) Yes
33. 33.⚖️ What colour is the text of this element?
    <h1 class="box" id="top">Hi</h1>
    CSS:
    h1 { color: blue; }
    h1 { color: purple; } (a) green (b) purple (c) blue (d) white
34. 34.✍️ What value is given to font-weight in this rule?
    h2 {
      padding: 8px;
      width: 300px;
      font-weight: bold;
    } (a) font-weight (b) 2px solid (c) bold (d) 300px
35. 35.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 160px;
      padding: 30px;
      border: 4px solid black;
      margin: 15px;
    }
36. 36.⚖️ What colour is the text of this element?
    <h1 class="star" id="main">Hi</h1>
    CSS:
    h1 { color: yellow; }
    .star { color: black; } (a) blue (b) green (c) yellow (d) black
37. 37.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 28px;
      }
    } (a) No (b) Yes
38. 38.🌈 Which colour of light is strongest in rgb(26, 152, 55)? (a) green (b) red (c) blue
39. 39.💪 Which flexbox property picks row or column? (a) align-items (b) gap (c) flex-direction (d) display: flex
40. 40.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 26px;
      }
    }

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