CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 95 · 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.True or false: JavaScript lays out the page. (a) True (b) False
2. 2.🧩 Which language rounds box corners? (a) HTML (b) CSS (c) JavaScript
3. 3.🖌️ Which CSS property makes letters bigger? (a) font-family (b) font-size (c) font-weight (d) text-align
4. 4.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 14px;
     }
   }
5. 5.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 14px;
     }
   }
6. 6.✍️ How many declarations (property: value pairs) are in this rule?
   h1 {
     border: 2px solid;
     font-style: italic;
     width: 300px;
   }
7. 7.⚖️ What colour is the text of this element?
   <h1 class="menu" id="top">Hi</h1>
   CSS:
   h1 { color: white; }
   h1 { color: orange; } (a) blue (b) purple (c) orange (d) white
8. 8.💪 Which justify-content value packs boxes at the start? (a) flex-start (b) center (c) space-between (d) flex-end
9. 9.🌈 Which colour of light is strongest in rgb(218, 1, 38)? (a) green (b) red (c) blue
10. 10.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 50px;
      padding: 30px;
      border: 1px solid black;
      margin: 20px;
    }
11. 11.🖌️ What colour are the letters?
    h2 {
      text-align: right;
      color: green;
      font-size: 28px;
      background-color: red;
    } (a) green (b) purple (c) red
12. 12.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 180px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 80px wide (no margins).
13. 13.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 12px;
      }
    }
14. 14.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 14px;
      }
    } (a) No (b) Yes
15. 15.⚖️ What colour is the text of this element?
    <h1 class="red" id="main">Hi</h1>
    CSS:
    h1 { color: red; }
    #main { color: blue; }
    .red { color: orange; } (a) orange (b) white (c) red (d) blue
16. 16.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 150px;
      padding: 20px;
      border: 2px solid black;
      margin: 15px;
    }
17. 17.✍️ What is the selector in this CSS rule?
    p {
      font-weight: bold;
      padding: 8px;
      color: red;
      text-align: center;
    } (a) 8px (b) font-weight (c) p (d) .note
18. 18.✍️ What value is given to font-size in this rule?
    p {
      margin: 10px;
      text-align: center;
      font-style: italic;
      font-size: 20px;
    } (a) 20px (b) font-size (c) center (d) yellow
19. 19.🎯 How many elements on a page should have the same id? (a) 1 (b) any number (c) 2 (d) 5
20. 20.💪 Which justify-content value puts boxes in the middle? (a) flex-start (b) flex-end (c) center (d) space-between
21. 21.✍️ What value is given to width in this rule?
    p {
      font-size: 20px;
      color: red;
      width: 300px;
    } (a) italic (b) red (c) 300px (d) width
22. 22.True or false: padding is the line round the box. (a) True (b) False
23. 23.📦 In the box model, which part is the gap round content? (a) border (b) padding (c) margin (d) content
24. 24.🌈 Which colour of light is strongest in rgb(150, 88, 59)? (a) green (b) red (c) blue
25. 25.✍️ What is the selector in this CSS rule?
    h2 {
      font-weight: bold;
      width: 300px;
    } (a) font-weight (b) h1 (c) 300px (d) h2
26. 26.⚖️ What colour is the text of this element?
    <h2 class="note" id="main">Hi</h2>
    CSS:
    h2 { color: orange; }
    .note { color: blue; }
    #main { color: purple; } (a) orange (b) red (c) purple (d) blue
27. 27.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 14px;
      }
    } (a) Yes (b) No
28. 28.True or false: h1 is an id selector. (a) True (b) False
29. 29.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 100px;
      padding: 20px;
      border: 2px solid black;
      margin: 0px;
    }
30. 30.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    }
31. 31.✍️ In color: blue; which part is the value? (a) ; (b) color (c) blue (d) :
32. 32.⚖️ What colour is the text of this element?
    <h2 class="box" id="hero">Hi</h2>
    CSS:
    #hero { color: white; }
    #hero { color: yellow; } (a) white (b) blue (c) orange (d) yellow
33. 33.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 160px;
      justify-content: center;
    }
    Inside are 2 boxes, each 50px wide (no margins).
34. 34.✍️ What value is given to padding in this rule?
    h1 {
      font-size: 20px;
      padding: 8px;
    } (a) padding (b) 2px solid (c) bold (d) 8px
35. 35.🌈 In #970000 the red part is the hex number 97. What is it as a normal number?
36. 36.🖌️ What colour is behind the letters?
    p {
      background-color: green;
      font-size: 20px;
      color: red;
      text-align: left;
    } (a) black (b) red (c) green
37. 37.✍️ What is the selector in this CSS rule?
    #top {
      width: 300px;
      border: 2px solid;
      margin: 10px;
      font-style: italic;
    } (a) #top (b) width (c) li (d) 2px solid
38. 38.🧩 Which language shows a pop-up message? (a) JavaScript (b) CSS (c) HTML
39. 39.What does background-color do? (a) picks the font style (b) colours behind the text (c) sets the letter colour (d) makes letters bigger
40. 40.🎨 One CSS file can style how many pages? (a) no pages (b) many pages (c) only one image (d) only one word

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