CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 786 · 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 much space across (px) does this box take in all, margin included?
   .box {
     width: 150px;
     padding: 5px;
     border: 3px solid black;
     margin: 15px;
   }
2. 2.📱 max-width: 600px applies when the screen is ___. (a) turned off (b) exactly 1000px (c) 600px or wider (d) 600px or narrower
3. 3.📦 In the box model, which part is space inside the border? (a) content (b) border (c) padding (d) margin
4. 4.🖌️ What colour are the letters?
   h2 {
     font-size: 28px;
     background-color: blue;
     color: yellow;
     text-align: left;
   } (a) blue (b) red (c) yellow
5. 5.📦 In the box model, which part is the line round the box? (a) border (b) margin (c) content (d) padding
6. 6.🧩 Which language makes headings and lists? (a) JavaScript (b) HTML (c) CSS
7. 7.🖌️ What colour are the letters?
   h2 {
     font-size: 20px;
     color: yellow;
     text-align: center;
     background-color: green;
   } (a) white (b) green (c) yellow
8. 8.📱 What does a media query check? (a) the time of day (b) the screen width (c) the battery level (d) the page title
9. 9.📱 The screen is 700px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 20px;
     }
   } (a) No (b) Yes
10. 10.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    }
11. 11.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) neither (c) the shorter one (d) the later one
12. 12.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) center (c) flex-start (d) space-between
13. 13.🎯 Which sign starts an id selector? (a) & (b) . (c) @ (d) #
14. 14.⚖️ What colour is the text of this element?
    <h2 class="star" id="top">Hi</h2>
    CSS:
    #top { color: yellow; }
    h2 { color: orange; }
    .star { color: red; } (a) red (b) orange (c) white (d) yellow
15. 15.🧩 Which language gives the page structure? (a) JavaScript (b) CSS (c) HTML
16. 16.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 30px;
      }
    } (a) Yes (b) No
17. 17.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) black (c) red (d) blue
18. 18.Which of these does CSS do? (a) changes the text size (b) makes a link (c) changes the page live (d) shows a pop-up message
19. 19.✍️ In color: blue; which part is the value? (a) color (b) ; (c) : (d) blue
20. 20.🖌️ Which CSS property sets the letter colour? (a) font-size (b) background-color (c) color (d) font-family
21. 21.🎯 What kind of selector is .big? (a) a class selector (b) an element selector (c) an id selector
22. 22.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 320px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 80px wide (no margins).
23. 23.⚖️ What colour is the text of this element?
    <h2 class="menu" id="top">Hi</h2>
    CSS:
    #top { color: white; }
    .menu { color: blue; }
    h2 { color: orange; } (a) white (b) black (c) blue (d) orange
24. 24.Which of these is the content? (a) the gap round content (b) the line round the box (c) the text or picture (d) space inside the border
25. 25.True or false: HTML changes the text size. (a) True (b) False
26. 26.True or false: #main is a class selector. (a) False (b) True
27. 27.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    } (a) Yes (b) No
28. 28.Which of these does JavaScript do? (a) sets colours and fonts (b) changes the page live (c) adds space around boxes (d) makes a link
29. 29.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 170px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 50px wide (no margins).
30. 30.✍️ How does a CSS comment start? (a) # (b) // (c) <!-- (d) /*
31. 31.🎯 How many elements on a page should have the same id? (a) 2 (b) 5 (c) any number (d) 1
32. 32.🌈 Which hex code is bright green? (a) #000000 (b) #0000ff (c) #00ffff (d) #00ff00
33. 33.✍️ What is the selector in this CSS rule?
    li {
      border: 2px solid;
      font-size: 20px;
    } (a) 20px (b) body (c) border (d) li
34. 34.True or false: .star is an id selector. (a) True (b) False
35. 35.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 16px;
      }
    } (a) Yes (b) No
36. 36.⚖️ Which selector is the strongest? (a) a class selector (b) an element selector (c) an id selector
37. 37.🖌️ Which CSS property makes letters bigger? (a) text-align (b) font-size (c) font-weight (d) font-family
38. 38.✍️ What is the selector in this CSS rule?
    h2 {
      font-style: italic;
      width: 300px;
      padding: 8px;
      font-size: 20px;
    } (a) h2 (b) font-style (c) h1 (d) 300px
39. 39.🧩 Which language sets colours and fonts? (a) CSS (b) JavaScript (c) HTML
40. 40.✍️ In color: blue; which part is the property? (a) blue (b) color (c) ; (d) :

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