CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 612 · 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: 160px;
     padding: 30px;
     border: 2px solid black;
     margin: 10px;
   }
2. 2.Which of these is the border? (a) space inside the border (b) the line round the box (c) the gap round content (d) the gap to other boxes
3. 3.✍️ Which sign ends each CSS declaration? (a) : (b) ; (c) , (d) .
4. 4.✍️ In color: blue; which part is the property? (a) blue (b) ; (c) color (d) :
5. 5.🎯 Can many elements share the same class? (a) No (b) Yes
6. 6.⚖️ What colour is the text of this element?
   <h1 class="box" id="main">Hi</h1>
   CSS:
   h1 { color: blue; }
   .box { color: orange; } (a) orange (b) blue (c) white (d) yellow
7. 7.Which of these does HTML do? (a) makes a form box (b) counts down a timer (c) adds space around boxes (d) reacts to a button click
8. 8.🖌️ What colour are the letters?
   li {
     font-size: 32px;
     text-align: left;
     background-color: blue;
     color: orange;
   } (a) orange (b) blue (c) white
9. 9.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the first one (c) neither (d) the later one
10. 10.📦 In the box model, which part is the line round the box? (a) padding (b) margin (c) border (d) content
11. 11.True or false: the content is the text or picture. (a) False (b) True
12. 12.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 480px;
      justify-content: center;
    }
    Inside are 4 boxes, each 100px wide (no margins).
13. 13.🌈 In #rrggbb, which colour do the last two digits give? (a) blue (b) white (c) green (d) red
14. 14.📦 In the box model, which part is the text or picture? (a) margin (b) content (c) border (d) padding
15. 15.What does font-weight do? (a) makes the text bold (b) centres a heading (c) colours behind the text (d) sets the letter colour
16. 16.Which of these is margin? (a) the text or picture (b) space inside the border (c) space outside the border (d) a solid or dotted edge
17. 17.True or false: #hero is an id selector. (a) True (b) False
18. 18.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    }
19. 19.🌈 Which colour of light is strongest in rgb(88, 186, 79)? (a) green (b) blue (c) red
20. 20.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 120px;
      padding: 20px;
      border: 3px solid black;
      margin: 15px;
    }
21. 21.📦 In the box model, which part is space outside the border? (a) padding (b) border (c) margin (d) content
22. 22.✍️ What is the selector in this CSS rule?
    #top {
      font-size: 20px;
      margin: 10px;
    } (a) li (b) #top (c) 10px (d) font-size
23. 23.✍️ Which sign goes between a property and its value? (a) ; (b) = (c) - (d) :
24. 24.💪 Which flexbox property lines boxes up across? (a) align-items (b) gap (c) justify-content (d) flex-direction
25. 25.⚖️ Which selector is the strongest? (a) a class selector (b) an element selector (c) an id selector
26. 26.✍️ What value is given to font-size in this rule?
    p {
      text-align: center;
      font-size: 20px;
      background-color: yellow;
      width: 300px;
    } (a) yellow (b) center (c) font-size (d) 20px
27. 27.True or false: padding is the gap round content. (a) True (b) False
28. 28.✍️ What value is given to color in this rule?
    .note {
      background-color: yellow;
      color: red;
    } (a) center (b) color (c) red (d) 20px
29. 29.💪 Which flexbox property turns on flexbox? (a) display: flex (b) align-items (c) gap (d) justify-content
30. 30.🎯 Which CSS selector matches this element?
    <div class="red" id="logo">Hello</div> (a) .red (b) #end (c) .box (d) .logo
31. 31.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      text-align: center;
      font-size: 20px;
      color: red;
      background-color: yellow;
    }
32. 32.🌈 In #00ae00 the green part is the hex number ae. What is it as a normal number?
33. 33.🔍 Which is the odd one out? (a) changes the text size (b) makes headings and lists (c) gives the page structure (d) puts a picture on a page
34. 34.🌈 Which colour is #0000ff? (a) bright green (b) magenta (c) blue (d) red
35. 35.✍️ Which property is set to center in this rule?
    .note {
      text-align: center;
      padding: 8px;
    } (a) background-color (b) center (c) text-align (d) margin
36. 36.✍️ What is the selector in this CSS rule?
    body {
      font-weight: bold;
      margin: 10px;
    } (a) body (b) .box (c) font-weight (d) 10px
37. 37.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    }
38. 38.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) turned off (c) exactly 1000px (d) 600px or wider
39. 39.⚖️ What colour is the text of this element?
    <h2 class="box" id="end">Hi</h2>
    CSS:
    #end { color: red; }
    #end { color: white; } (a) yellow (b) red (c) orange (d) white
40. 40.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 28px;
      }
    }

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