CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 158 · 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 CSS selector matches this element?
   <h1 class="note" id="intro">Hello</h1> (a) .big (b) .intro (c) #note (d) .note
2. 2.✍️ Which sign ends each CSS declaration? (a) . (b) , (c) ; (d) :
3. 3.✍️ What is the selector in this CSS rule?
   p {
     background-color: yellow;
     color: red;
     font-size: 20px;
   } (a) red (b) background-color (c) p (d) .note
4. 4.🖌️ What colour are the letters?
   li {
     color: orange;
     text-align: left;
     background-color: white;
     font-size: 24px;
   } (a) orange (b) white (c) red
5. 5.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 240px;
     justify-content: flex-start;
   }
   Inside are 2 boxes, each 80px wide (no margins).
6. 6.🔍 Which is the odd one out? (a) sets colours and fonts (b) gives the page structure (c) makes a link (d) makes headings and lists
7. 7.📦 In the box model, which part is space inside the border? (a) padding (b) margin (c) content (d) border
8. 8.⚖️ Which selector is the weakest? (a) a class selector (b) an element selector (c) an id selector
9. 9.🎯 Which element does the selector div style? (a) <h1 id="main"> (b) <p class="star"> (c) <div class="star"> (d) <span>
10. 10.✍️ Which property is set to 10px in this rule?
    #top {
      font-weight: bold;
      margin: 10px;
    } (a) font-weight (b) padding (c) margin (d) 10px
11. 11.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) green (c) blue (d) white
12. 12.What does text-align do? (a) makes the text bold (b) makes letters bigger (c) centres a heading (d) sets the letter colour
13. 13.📱 Responsive design means a page ___. (a) has no pictures (b) is only for laptops (c) never changes (d) fits every screen
14. 14.🎨 Which tag holds CSS inside the head? (a) <style> (b) <script> (c) <body> (d) <css>
15. 15.🖌️ How big is the text, in px?
    li {
      font-size: 16px;
      color: blue;
      text-align: right;
      background-color: yellow;
    }
16. 16.🧩 Which language makes a form box? (a) HTML (b) CSS (c) JavaScript
17. 17.Which of these is the border? (a) the gap to other boxes (b) space outside the border (c) the line round the box (d) the text or picture
18. 18.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      padding: 8px;
      font-style: italic;
    }
19. 19.🌈 Which colour is #ff0000? (a) red (b) blue (c) yellow (d) bright green
20. 20.🌈 Which hex code is cyan? (a) #00ffff (b) #ff0000 (c) #ffffff (d) #000000
21. 21.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    }
22. 22.🖌️ Which CSS property picks the font style? (a) background-color (b) font-family (c) text-align (d) color
23. 23.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 180px;
      padding: 10px;
      border: 5px solid black;
      margin: 20px;
    }
24. 24.✍️ CSS declarations go inside which brackets? (a) ( ) (b) { } (c) < > (d) [ ]
25. 25.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 255 (c) 99 (d) 1000
26. 26.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) exactly 1000px (c) turned off (d) 600px or wider
27. 27.What does justify-content: flex-end do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the end (d) packs boxes at the start
28. 28.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 140px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 60px wide (no margins).
29. 29.🖌️ Where does the text sit on its line?
    li {
      background-color: blue;
      font-size: 40px;
      color: purple;
      text-align: right;
    } (a) in the middle (b) on the right (c) on the left
30. 30.💪 Which flexbox property sets space between boxes? (a) justify-content (b) display: flex (c) gap (d) flex-direction
31. 31.💪 Which flexbox property turns on flexbox? (a) gap (b) display: flex (c) flex-direction (d) align-items
32. 32.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 260px;
      justify-content: center;
    }
    Inside are 2 boxes, each 60px wide (no margins).
33. 33.📦 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: 5px;
      border: 5px solid black;
      margin: 10px;
    }
34. 34.Which of these does CSS do? (a) changes the text size (b) makes headings and lists (c) reacts to a button click (d) makes a link
35. 35.⚖️ What colour is the text of this element?
    <h1 class="box" id="end">Hi</h1>
    CSS:
    h1 { color: purple; }
    h1 { color: blue; } (a) blue (b) purple (c) red (d) white
36. 36.Which of these does CSS do? (a) changes the page live (b) counts down a timer (c) shows a pop-up message (d) rounds box corners
37. 37.🖌️ What colour is behind the letters?
    p {
      background-color: black;
      text-align: right;
      font-size: 32px;
      color: purple;
    } (a) purple (b) yellow (c) black
38. 38.🖌️ How big is the text, in px?
    h2 {
      text-align: center;
      font-size: 12px;
      color: purple;
      background-color: blue;
    }
39. 39.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      font-weight: bold;
      padding: 8px;
      font-style: italic;
    }
40. 40.⚖️ What colour is the text of this element?
    <h2 class="star" id="intro">Hi</h2>
    CSS:
    h2 { color: green; }
    #intro { color: blue; } (a) red (b) blue (c) yellow (d) green

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