CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 778 · 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.🖌️ How big is the text, in px?
   h2 {
     background-color: white;
     text-align: right;
     color: blue;
     font-size: 24px;
   }
2. 2.⚖️ What colour is the text of this element?
   <p class="star" id="top">Hi</p>
   CSS:
   .star { color: black; }
   .star { color: red; } (a) purple (b) black (c) green (d) red
3. 3.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 410px;
     justify-content: space-between;
   }
   Inside are 4 boxes, each 80px wide (no margins).
4. 4.🧩 Which language shows a pop-up message? (a) CSS (b) JavaScript (c) HTML
5. 5.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the later one (c) the shorter one (d) neither
6. 6.🧩 Which language checks a quiz answer? (a) CSS (b) JavaScript (c) HTML
7. 7.✍️ What is the selector in this CSS rule?
   body {
     color: red;
     border: 2px solid;
   } (a) 2px solid (b) .box (c) body (d) color
8. 8.⚖️ What colour is the text of this element?
   <p class="star" id="main">Hi</p>
   CSS:
   #main { color: black; }
   #main { color: orange; } (a) white (b) orange (c) red (d) black
9. 9.Which of these is the content? (a) the gap round content (b) space inside the border (c) the gap to other boxes (d) the text or picture
10. 10.📱 Which tag helps phones show a page at the right size? (a) the viewport meta tag (b) the title tag (c) the br tag (d) the hr tag
11. 11.✍️ In color: blue; which part is the value? (a) ; (b) : (c) blue (d) color
12. 12.🎯 What kind of selector is img? (a) an id selector (b) an element selector (c) a class selector
13. 13.🖌️ Where does the text sit on its line?
    h2 {
      background-color: white;
      text-align: right;
      color: orange;
      font-size: 36px;
    } (a) on the right (b) on the left (c) in the middle
14. 14.🌈 In #003800 the green part is the hex number 38. What is it as a normal number?
15. 15.🎯 Which CSS selector matches this element?
    <h2 class="red" id="logo">Hello</h2> (a) #red (b) #end (c) li (d) h2
16. 16.🔍 Which is the odd one out? (a) shows a pop-up message (b) gives the page structure (c) makes a form box (d) makes headings and lists
17. 17.🎯 Which element does the selector h1 style? (a) <li class="note"> (b) <div id="main"> (c) <h2> (d) <h1 class="note">
18. 18.🖌️ What colour is behind the letters?
    li {
      text-align: left;
      color: blue;
      background-color: orange;
      font-size: 24px;
    } (a) red (b) orange (c) blue
19. 19.✍️ Which property is set to 20px in this rule?
    li {
      font-size: 20px;
      color: red;
      font-style: italic;
    } (a) background-color (b) 20px (c) font-size (d) text-align
20. 20.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 200px;
      padding: 5px;
      border: 3px solid black;
      margin: 5px;
    }
21. 21.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    } (a) Yes (b) No
22. 22.🎯 Which element does the selector .menu style? (a) <div id="menu"> (b) <div class="note"> (c) <span class="big"> (d) <div class="menu">
23. 23.True or false: CSS reacts to a button click. (a) True (b) False
24. 24.✍️ Which sign ends each CSS declaration? (a) : (b) , (c) . (d) ;
25. 25.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 160px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 40px wide (no margins).
26. 26.True or false: body is an element selector. (a) True (b) False
27. 27.🖌️ How big is the text, in px?
    li {
      color: red;
      font-size: 20px;
      text-align: right;
      background-color: white;
    }
28. 28.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      width: 300px;
      font-size: 20px;
      padding: 8px;
    }
29. 29.True or false: the border is space outside the border. (a) False (b) True
30. 30.🎯 What kind of selector is body? (a) a class selector (b) an id selector (c) an element selector
31. 31.✍️ What is the selector in this CSS rule?
    body {
      text-align: center;
      font-size: 20px;
      font-style: italic;
    } (a) body (b) .box (c) 20px (d) text-align
32. 32.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      width: 300px;
      font-style: italic;
    }
33. 33.🧩 Which language lays out the page? (a) CSS (b) JavaScript (c) HTML
34. 34.True or false: li is an element selector. (a) False (b) True
35. 35.🔍 Which is the odd one out? (a) makes headings and lists (b) counts down a timer (c) reacts to a button click (d) shows a pop-up message
36. 36.✍️ Which property is set to yellow in this rule?
    li {
      font-style: italic;
      background-color: yellow;
    } (a) yellow (b) margin (c) padding (d) background-color
37. 37.🧩 Which language reacts to a button click? (a) CSS (b) HTML (c) JavaScript
38. 38.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 6px;
      }
    }
39. 39.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 130px;
      padding: 15px;
      border: 3px solid black;
      margin: 5px;
    }
40. 40.🔍 Which is the odd one out? (a) changes the page live (b) changes the text size (c) checks a quiz answer (d) reacts to a button click

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