CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 880 · 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 tag holds CSS inside the head? (a) <css> (b) <body> (c) <script> (d) <style>
2. 2.✍️ How many declarations (property: value pairs) are in this rule?
   body {
     padding: 8px;
     color: red;
   }
3. 3.🎯 Which CSS selector matches this element?
   <div class="note" id="intro">Hello</div> (a) #main (b) div (c) .big (d) #note
4. 4.True or false: the border is the line round the box. (a) True (b) False
5. 5.✍️ In color: blue; which part is the value? (a) color (b) : (c) ; (d) blue
6. 6.🌈 Which colour of light is strongest in rgb(218, 99, 17)? (a) red (b) green (c) blue
7. 7.🎯 Which CSS selector matches this element?
   <li class="big" id="intro">Hello</li> (a) div (b) #intro (c) .red (d) #main
8. 8.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 160px;
     padding: 15px;
     border: 4px solid black;
     margin: 20px;
   }
9. 9.✍️ Which sign goes between a property and its value? (a) ; (b) - (c) = (d) :
10. 10.What does justify-content: center do? (a) packs boxes at the end (b) puts boxes in the middle (c) packs boxes at the start (d) equal gaps, none at ends
11. 11.🌈 In #004200 the green part is the hex number 42. What is it as a normal number?
12. 12.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      padding: 8px;
    }
13. 13.🎯 Which element does the selector p style? (a) <h2 class="menu"> (b) <li id="intro"> (c) <p class="menu"> (d) <h1>
14. 14.💪 Which flexbox property picks row or column? (a) justify-content (b) flex-direction (c) display: flex (d) align-items
15. 15.🧩 Which language lays out the page? (a) JavaScript (b) CSS (c) HTML
16. 16.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 250px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 50px wide (no margins).
17. 17.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 14px;
      }
    } (a) No (b) Yes
18. 18.🎯 Which sign starts a class selector? (a) @ (b) & (c) . (d) #
19. 19.⚖️ Which selector is the weakest? (a) an element selector (b) an id selector (c) a class selector
20. 20.🎯 What kind of selector is body? (a) an id selector (b) a class selector (c) an element selector
21. 21.🎯 What kind of selector is li? (a) an id selector (b) an element selector (c) a class selector
22. 22.💪 Which justify-content value puts boxes in the middle? (a) flex-start (b) space-between (c) center (d) flex-end
23. 23.🎯 Which CSS selector matches this element?
    <div class="note" id="end">Hello</div> (a) #end (b) .big (c) .end (d) span
24. 24.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 22px;
      }
    }
25. 25.True or false: HTML gives the page structure. (a) False (b) True
26. 26.🎯 How many elements on a page should have the same id? (a) 2 (b) any number (c) 1 (d) 5
27. 27.✍️ CSS declarations go inside which brackets? (a) < > (b) ( ) (c) { } (d) [ ]
28. 28.🖌️ Which CSS property colours behind the text? (a) background-color (b) color (c) font-weight (d) text-align
29. 29.What does justify-content: flex-end do? (a) puts boxes in the middle (b) equal gaps, none at ends (c) packs boxes at the start (d) packs boxes at the end
30. 30.Which of these does HTML do? (a) shows a pop-up message (b) rounds box corners (c) makes headings and lists (d) checks a quiz answer
31. 31.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    }
32. 32.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 190px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 50px wide (no margins).
33. 33.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the later one (c) neither (d) the shorter one
34. 34.📦 In the box model, which part is space inside the border? (a) border (b) margin (c) content (d) padding
35. 35.🌈 Which colour of light is strongest in rgb(167, 54, 127)? (a) blue (b) green (c) red
36. 36.✍️ Which sign ends each CSS declaration? (a) , (b) . (c) ; (d) :
37. 37.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 300px;
      padding: 30px;
      border: 1px solid black;
      margin: 5px;
    }
38. 38.True or false: .note is a class selector. (a) True (b) False
39. 39.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
40. 40.Which of these is the border? (a) the gap to other boxes (b) the text or picture (c) a solid or dotted edge (d) space outside the border

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