CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 203 · 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 flexbox property turns on flexbox? (a) display: flex (b) align-items (c) flex-direction (d) gap
2. 2.🎯 Which CSS selector matches this element?
   <p class="menu" id="hero">Hello</p> (a) #menu (b) .menu (c) h1 (d) .note
3. 3.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 18px;
     }
   }
4. 4.🖌️ What colour is behind the letters?
   p {
     background-color: purple;
     font-size: 12px;
     color: black;
     text-align: right;
   } (a) orange (b) black (c) purple
5. 5.✍️ What value is given to border in this rule?
   #top {
     padding: 8px;
     border: 2px solid;
   } (a) italic (b) 300px (c) 2px solid (d) border
6. 6.📱 Which tag helps phones show a page at the right size? (a) the br tag (b) the viewport meta tag (c) the hr tag (d) the title tag
7. 7.🎨 Which tag holds CSS inside the head? (a) <style> (b) <script> (c) <body> (d) <css>
8. 8.🎯 Which element does the selector .box style? (a) <li id="box"> (b) <li class="box"> (c) <li class="star"> (d) <div class="menu">
9. 9.🌈 Which colour of light is strongest in rgb(199, 130, 115)? (a) blue (b) green (c) red
10. 10.⚖️ What colour is the text of this element?
    <h2 class="red" id="logo">Hi</h2>
    CSS:
    #logo { color: white; }
    .red { color: green; } (a) green (b) white (c) yellow (d) purple
11. 11.🌈 In #rrggbb, which colour do the last two digits give? (a) white (b) blue (c) green (d) red
12. 12.What does background-color do? (a) makes letters bigger (b) centres a heading (c) sets the letter colour (d) colours behind the text
13. 13.✍️ What is the selector in this CSS rule?
    .note {
      text-align: center;
      padding: 8px;
      font-size: 20px;
    } (a) #top (b) .note (c) 8px (d) text-align
14. 14.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 110px;
      padding: 5px;
      border: 4px solid black;
      margin: 20px;
    }
15. 15.🔍 Which is the odd one out? (a) shows a pop-up message (b) counts down a timer (c) sets colours and fonts (d) checks a quiz answer
16. 16.Which of these is the border? (a) the gap round content (b) the line round the box (c) the gap to other boxes (d) space outside the border
17. 17.💪 Which flexbox property lines boxes up across? (a) gap (b) flex-direction (c) justify-content (d) align-items
18. 18.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
19. 19.📦 In the box model, which part is the text or picture? (a) content (b) padding (c) border (d) margin
20. 20.🖌️ What colour are the letters?
    h1 {
      background-color: yellow;
      text-align: left;
      color: orange;
      font-size: 12px;
    } (a) yellow (b) white (c) orange
21. 21.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 22px;
      }
    }
22. 22.🧩 Which language lays out the page? (a) CSS (b) JavaScript (c) HTML
23. 23.✍️ What value is given to margin in this rule?
    h2 {
      margin: 10px;
      color: red;
      font-weight: bold;
    } (a) 10px (b) margin (c) bold (d) 8px
24. 24.✍️ What value is given to font-style in this rule?
    .box {
      font-style: italic;
      font-size: 20px;
      color: red;
      border: 2px solid;
    } (a) font-style (b) italic (c) red (d) 20px
25. 25.🎯 What kind of selector is #hero? (a) a class selector (b) an element selector (c) an id selector
26. 26.Which of these does JavaScript do? (a) makes headings and lists (b) puts a picture on a page (c) adds space around boxes (d) changes the page live
27. 27.🎯 Which sign starts an id selector? (a) # (b) & (c) @ (d) .
28. 28.📱 Responsive design means a page ___. (a) fits every screen (b) never changes (c) is only for laptops (d) has no pictures
29. 29.True or false: h1 is an element selector. (a) False (b) True
30. 30.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 24px;
      }
    } (a) No (b) Yes
31. 31.⚖️ What colour is the text of this element?
    <h1 class="box" id="top">Hi</h1>
    CSS:
    .box { color: black; }
    #top { color: blue; }
    h1 { color: orange; } (a) blue (b) orange (c) red (d) black
32. 32.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      margin: 10px;
      padding: 8px;
    }
33. 33.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      border: 2px solid;
      font-size: 20px;
    }
34. 34.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      font-weight: bold;
      background-color: yellow;
      color: red;
    }
35. 35.🔍 Which is the odd one out? (a) gives the page structure (b) rounds box corners (c) changes the text size (d) adds space around boxes
36. 36.🎯 What kind of selector is p? (a) an id selector (b) a class selector (c) an element selector
37. 37.🎯 Which CSS selector matches this element?
    <p class="box" id="top">Hello</p> (a) #intro (b) .star (c) #box (d) #top
38. 38.🎯 What kind of selector is #end? (a) an element selector (b) a class selector (c) an id selector
39. 39.🖌️ Which CSS property makes the text bold? (a) font-size (b) background-color (c) font-weight (d) color
40. 40.🌈 Which colour of light is strongest in rgb(203, 25, 41)? (a) green (b) red (c) blue

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