CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 255 · 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?
   <h1 class="menu" id="top">Hi</h1>
   CSS:
   #top { color: green; }
   #top { color: blue; } (a) blue (b) white (c) green (d) red
2. 2.⚖️ Which selector is the weakest? (a) an id selector (b) an element selector (c) a class selector
3. 3.📱 What does a media query check? (a) the time of day (b) the screen width (c) the battery level (d) the page title
4. 4.🌈 In #rrggbb, which colour do the last two digits give? (a) white (b) green (c) blue (d) red
5. 5.📱 Responsive design means a page ___. (a) is only for laptops (b) never changes (c) has no pictures (d) fits every screen
6. 6.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 200px;
     padding: 20px;
     border: 1px solid black;
     margin: 10px;
   }
7. 7.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 20px;
     }
   }
8. 8.✍️ CSS declarations go inside which brackets? (a) < > (b) ( ) (c) { } (d) [ ]
9. 9.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 200px;
     justify-content: flex-start;
   }
   Inside are 3 boxes, each 50px wide (no margins).
10. 10.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 150px;
      padding: 30px;
      border: 1px solid black;
      margin: 5px;
    }
11. 11.🔍 Which is the odd one out? (a) changes the page live (b) reacts to a button click (c) puts a picture on a page (d) counts down a timer
12. 12.Which of these is the border? (a) space outside the border (b) the gap round content (c) space inside the border (d) the line round the box
13. 13.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 300px;
      justify-content: center;
    }
    Inside are 4 boxes, each 40px wide (no margins).
14. 14.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
15. 15.🎯 Which CSS selector matches this element?
    <span class="big" id="main">Hello</span> (a) p (b) .main (c) #big (d) span
16. 16.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 6px;
      }
    }
17. 17.🧩 Which language counts down a timer? (a) JavaScript (b) CSS (c) HTML
18. 18.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 100px;
      padding: 10px;
      border: 1px solid black;
      margin: 5px;
    }
19. 19.🖌️ What colour are the letters?
    h1 {
      text-align: center;
      font-size: 16px;
      background-color: black;
      color: blue;
    } (a) orange (b) black (c) blue
20. 20.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) 800px or wider (c) exactly 100px (d) turned off
21. 21.🎯 Which CSS selector matches this element?
    <h1 class="box" id="end">Hello</h1> (a) #box (b) .end (c) h1 (d) h2
22. 22.🖌️ What colour are the letters?
    p {
      font-size: 36px;
      color: green;
      text-align: center;
      background-color: purple;
    } (a) blue (b) purple (c) green
23. 23.🎯 How many elements on a page should have the same id? (a) 2 (b) 5 (c) any number (d) 1
24. 24.🌈 In #090000 the red part is the hex number 09. What is it as a normal number?
25. 25.✍️ In color: blue; which part is the property? (a) : (b) blue (c) ; (d) color
26. 26.Which of these does JavaScript do? (a) rounds box corners (b) makes headings and lists (c) checks a quiz answer (d) lays out the page
27. 27.True or false: HTML makes a form box. (a) False (b) True
28. 28.🎯 Which sign starts a class selector? (a) # (b) @ (c) & (d) .
29. 29.✍️ What is the selector in this CSS rule?
    li {
      color: red;
      background-color: yellow;
      margin: 10px;
      font-size: 20px;
    } (a) yellow (b) body (c) color (d) li
30. 30.🧩 Which language makes a form box? (a) JavaScript (b) HTML (c) CSS
31. 31.🖌️ Which CSS property makes the text bold? (a) color (b) text-align (c) font-weight (d) font-family
32. 32.🌈 Which hex code is cyan? (a) #ffffff (b) #000000 (c) #00ffff (d) #ff0000
33. 33.Which of these is the content? (a) the gap to other boxes (b) the gap round content (c) the text or picture (d) space outside the border
34. 34.✍️ Which sign ends each CSS declaration? (a) ; (b) . (c) , (d) :
35. 35.What does background-color do? (a) centres a heading (b) sets the letter colour (c) colours behind the text (d) makes the text bold
36. 36.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      margin: 10px;
      font-weight: bold;
      font-style: italic;
      text-align: center;
    }
37. 37.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 260px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 60px wide (no margins).
38. 38.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      font-size: 20px;
    }
39. 39.✍️ Which property is set to italic in this rule?
    li {
      background-color: yellow;
      font-style: italic;
    } (a) color (b) font-style (c) font-size (d) italic
40. 40.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 18px;
      }
    }

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