CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 830 · 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.⚖️ What colour is the text of this element?
   <h1 class="red" id="end">Hi</h1>
   CSS:
   .red { color: yellow; }
   .red { color: purple; } (a) black (b) yellow (c) purple (d) red
2. 2.✍️ How many declarations (property: value pairs) are in this rule?
   #top {
     font-style: italic;
     border: 2px solid;
     margin: 10px;
     font-weight: bold;
   }
3. 3.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 200px;
     padding: 5px;
     border: 5px solid black;
     margin: 20px;
   }
4. 4.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 30px;
     }
   }
5. 5.💪 Which flexbox property turns on flexbox? (a) gap (b) justify-content (c) align-items (d) display: flex
6. 6.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 210px;
     justify-content: flex-end;
   }
   Inside are 4 boxes, each 40px wide (no margins).
7. 7.🌈 Which colour is #000000? (a) red (b) blue (c) black (d) cyan
8. 8.🎨 A CSS file usually ends with which extension? (a) .css (b) .js (c) .html (d) .png
9. 9.📱 The screen is 1100px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 28px;
     }
   } (a) Yes (b) No
10. 10.🧩 Which language makes a link? (a) HTML (b) JavaScript (c) CSS
11. 11.✍️ What value is given to font-weight in this rule?
    #top {
      font-style: italic;
      font-weight: bold;
      background-color: yellow;
      width: 300px;
    } (a) 2px solid (b) 300px (c) bold (d) font-weight
12. 12.🖌️ How big is the text, in px?
    li {
      color: red;
      background-color: purple;
      text-align: center;
      font-size: 20px;
    }
13. 13.🎯 Which sign starts a class selector? (a) @ (b) # (c) & (d) .
14. 14.📦 In the box model, which part is space inside the border? (a) content (b) border (c) margin (d) padding
15. 15.✍️ What value is given to font-style in this rule?
    body {
      font-style: italic;
      font-size: 20px;
    } (a) italic (b) red (c) 20px (d) font-style
16. 16.✍️ In color: blue; which part is the value? (a) color (b) ; (c) : (d) blue
17. 17.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 140px;
      padding: 15px;
      border: 4px solid black;
      margin: 5px;
    }
18. 18.True or false: the border is the gap round content. (a) False (b) True
19. 19.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 170px;
      padding: 15px;
      border: 3px solid black;
      margin: 15px;
    }
20. 20.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) space-between (c) center (d) flex-start
21. 21.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) turned off (c) 600px or wider (d) exactly 1000px
22. 22.What does font-family do? (a) centres a heading (b) picks the font style (c) makes the text bold (d) makes letters bigger
23. 23.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the end (d) packs boxes at the start
24. 24.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    }
25. 25.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 1000 (c) 99 (d) 255
26. 26.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 240px;
      justify-content: center;
    }
    Inside are 2 boxes, each 40px wide (no margins).
27. 27.True or false: JavaScript reacts to a button click. (a) False (b) True
28. 28.✍️ What is the selector in this CSS rule?
    li {
      border: 2px solid;
      background-color: yellow;
      font-weight: bold;
      margin: 10px;
    } (a) li (b) border (c) yellow (d) body
29. 29.🖌️ Where does the text sit on its line?
    p {
      font-size: 28px;
      color: blue;
      text-align: left;
      background-color: green;
    } (a) on the left (b) on the right (c) in the middle
30. 30.🎯 Which CSS selector matches this element?
    <h1 class="box" id="hero">Hello</h1> (a) .star (b) .hero (c) #box (d) h1
31. 31.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
32. 32.True or false: p is an element selector. (a) False (b) True
33. 33.🖌️ Which CSS property makes letters bigger? (a) font-family (b) color (c) font-weight (d) font-size
34. 34.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 28px;
      }
    }
35. 35.✍️ CSS declarations go inside which brackets? (a) { } (b) < > (c) [ ] (d) ( )
36. 36.🖌️ What colour are the letters?
    h2 {
      font-size: 12px;
      background-color: white;
      text-align: center;
      color: green;
    } (a) black (b) green (c) white
37. 37.⚖️ What colour is the text of this element?
    <p class="star" id="top">Hi</p>
    CSS:
    .star { color: blue; }
    .star { color: yellow; } (a) blue (b) yellow (c) green (d) red
38. 38.Which of these is margin? (a) the gap round content (b) the text or picture (c) the line round the box (d) space outside the border
39. 39.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 28px;
      }
    }
40. 40.🎯 Which CSS selector matches this element?
    <h1 class="note" id="main">Hello</h1> (a) .note (b) #note (c) h2 (d) #logo

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