CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 626 · 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.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) 600px or narrower (c) turned off (d) exactly 1000px
2. 2.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 90px;
     padding: 5px;
     border: 4px solid black;
     margin: 20px;
   }
3. 3.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) black (c) red (d) blue
4. 4.What does justify-content: flex-start do? (a) puts boxes in the middle (b) packs boxes at the start (c) packs boxes at the end (d) equal gaps, none at ends
5. 5.🎨 One CSS file can style how many pages? (a) no pages (b) only one image (c) only one word (d) many pages
6. 6.🎯 Which element does the selector .star style? (a) <h1 class="menu"> (b) <h2 class="note"> (c) <h1 class="star"> (d) <h1 id="star">
7. 7.⚖️ What colour is the text of this element?
   <h1 class="note" id="logo">Hi</h1>
   CSS:
   h1 { color: white; }
   h1 { color: purple; } (a) black (b) purple (c) white (d) red
8. 8.What does font-weight do? (a) picks the font style (b) makes the text bold (c) sets the letter colour (d) colours behind the text
9. 9.💪 Which justify-content value puts boxes in the middle? (a) flex-start (b) flex-end (c) space-between (d) center
10. 10.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 250px;
      padding: 5px;
      border: 1px solid black;
      margin: 15px;
    }
11. 11.🌈 In #480000 the red part is the hex number 48. What is it as a normal number?
12. 12.Which of these does HTML do? (a) rounds box corners (b) shows a pop-up message (c) makes headings and lists (d) changes the text size
13. 13.📱 min-width: 800px applies when the screen is ___. (a) turned off (b) 800px or narrower (c) 800px or wider (d) exactly 100px
14. 14.True or false: HTML puts a picture on a page. (a) False (b) True
15. 15.✍️ What is the selector in this CSS rule?
    .box {
      border: 2px solid;
      font-size: 20px;
      width: 300px;
      padding: 8px;
    } (a) 20px (b) .box (c) border (d) h2
16. 16.💪 Which flexbox property lines boxes up across? (a) display: flex (b) align-items (c) flex-direction (d) gap
17. 17.🎯 Which element does the selector .box style? (a) <li class="star"> (b) <li class="box"> (c) <div class="menu"> (d) <li id="box">
18. 18.🌈 Which colour is #ff0000? (a) red (b) white (c) blue (d) bright green
19. 19.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 160px;
      padding: 5px;
      border: 4px solid black;
      margin: 5px;
    }
20. 20.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 14px;
      }
    }
21. 21.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 360px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 80px wide (no margins).
22. 22.🌈 Which colour is rgb(255, 0, 255)? (a) blue (b) magenta (c) red (d) cyan
23. 23.🎯 What kind of selector is h1? (a) an id selector (b) an element selector (c) a class selector
24. 24.💪 Which justify-content value packs boxes at the end? (a) space-between (b) flex-end (c) center (d) flex-start
25. 25.🌈 In #0000e4 the blue part is the hex number e4. What is it as a normal number?
26. 26.✍️ What is the selector in this CSS rule?
    body {
      font-size: 20px;
      font-style: italic;
    } (a) .box (b) italic (c) font-size (d) body
27. 27.⚖️ 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
28. 28.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 180px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 50px wide (no margins).
29. 29.🎯 Which CSS selector matches this element?
    <div class="red" id="end">Hello</div> (a) .end (b) span (c) .red (d) .box
30. 30.🧩 Which language checks a quiz answer? (a) HTML (b) CSS (c) JavaScript
31. 31.🔍 Which is the odd one out? (a) adds space around boxes (b) rounds box corners (c) checks a quiz answer (d) lays out the page
32. 32.🖌️ Which CSS property makes the text bold? (a) text-align (b) font-weight (c) background-color (d) font-size
33. 33.What does background-color do? (a) colours behind the text (b) centres a heading (c) picks the font style (d) sets the letter colour
34. 34.🔍 Which is the odd one out? (a) checks a quiz answer (b) sets colours and fonts (c) shows a pop-up message (d) counts down a timer
35. 35.Which of these is the content? (a) the gap to other boxes (b) space inside the border (c) the gap round content (d) the text or picture
36. 36.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 150px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 40px wide (no margins).
37. 37.✍️ Which property is set to 8px in this rule?
    body {
      border: 2px solid;
      padding: 8px;
      width: 300px;
      font-size: 20px;
    } (a) 8px (b) font-weight (c) padding (d) border
38. 38.True or false: padding is space inside the border. (a) True (b) False
39. 39.🌈 Which colour is #0000ff? (a) magenta (b) red (c) blue (d) bright green
40. 40.Which of these does CSS do? (a) checks a quiz answer (b) lays out the page (c) makes a form box (d) makes headings and lists

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