CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 560 · 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 value is given to font-size in this rule?
   body {
     width: 300px;
     text-align: center;
     font-size: 20px;
   } (a) 20px (b) yellow (c) center (d) font-size
2. 2.💪 Which justify-content value equal gaps, none at ends? (a) space-between (b) flex-start (c) flex-end (d) center
3. 3.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) neither (c) the later one (d) the shorter one
4. 4.🎯 Which CSS selector matches this element?
   <li class="menu" id="hero">Hello</li> (a) div (b) li (c) #menu (d) .note
5. 5.🎯 How many elements on a page should have the same id? (a) 5 (b) 2 (c) 1 (d) any number
6. 6.🔍 Which is the odd one out? (a) sets colours and fonts (b) puts a picture on a page (c) changes the text size (d) lays out the page
7. 7.⚖️ What colour is the text of this element?
   <p class="red" id="main">Hi</p>
   CSS:
   #main { color: orange; }
   #main { color: red; } (a) white (b) red (c) purple (d) orange
8. 8.📱 The screen is 700px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 18px;
     }
   } (a) Yes (b) No
9. 9.🎯 What kind of selector is .star? (a) an id selector (b) a class selector (c) an element selector
10. 10.🎯 What kind of selector is #end? (a) a class selector (b) an element selector (c) an id selector
11. 11.📦 In the box model, which part is space inside the border? (a) padding (b) margin (c) content (d) border
12. 12.✍️ Which property is set to 2px solid in this rule?
    #top {
      border: 2px solid;
      font-size: 20px;
    } (a) border (b) width (c) 2px solid (d) font-style
13. 13.🌈 In #rrggbb, which colour do the last two digits give? (a) blue (b) green (c) white (d) red
14. 14.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      font-weight: bold;
      font-size: 20px;
      text-align: center;
    }
15. 15.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
16. 16.🧩 Which language makes headings and lists? (a) JavaScript (b) HTML (c) CSS
17. 17.✍️ In color: blue; which part is the value? (a) : (b) ; (c) blue (d) color
18. 18.Which of these is the content? (a) the text or picture (b) the line round the box (c) the gap round content (d) space inside the border
19. 19.🌈 In #rrggbb, which colour do the first two digits give? (a) black (b) blue (c) red (d) green
20. 20.✍️ Which property is set to 2px solid in this rule?
    #top {
      border: 2px solid;
      text-align: center;
      font-style: italic;
      width: 300px;
    } (a) border (b) font-style (c) 2px solid (d) width
21. 21.True or false: CSS checks a quiz answer. (a) True (b) False
22. 22.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
23. 23.✍️ What is the selector in this CSS rule?
    .box {
      padding: 8px;
      text-align: center;
    } (a) center (b) padding (c) h2 (d) .box
24. 24.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      color: red;
      margin: 10px;
      width: 300px;
      font-size: 20px;
    }
25. 25.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 60px;
      padding: 25px;
      border: 4px solid black;
      margin: 5px;
    }
26. 26.✍️ What value is given to color in this rule?
    h2 {
      color: red;
      width: 300px;
    } (a) color (b) 20px (c) red (d) center
27. 27.✍️ What is the selector in this CSS rule?
    h1 {
      text-align: center;
      background-color: yellow;
    } (a) p (b) text-align (c) yellow (d) h1
28. 28.✍️ Which property is set to 10px in this rule?
    h1 {
      width: 300px;
      margin: 10px;
    } (a) font-weight (b) 10px (c) padding (d) margin
29. 29.🌈 Hex digits go 0 to 9, then A to which letter? (a) F (b) G (c) J (d) Z
30. 30.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 2 (c) 4 (d) 3
31. 31.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      color: red;
    }
32. 32.Which of these does CSS do? (a) makes a form box (b) gives the page structure (c) puts a picture on a page (d) adds space around boxes
33. 33.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    } (a) Yes (b) No
34. 34.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 22px;
      }
    }
35. 35.🎯 What kind of selector is #hero? (a) an id selector (b) a class selector (c) an element selector
36. 36.🌈 Which colour of light is strongest in rgb(112, 27, 164)? (a) green (b) red (c) blue
37. 37.🖌️ Where does the text sit on its line?
    p {
      background-color: red;
      text-align: right;
      color: orange;
      font-size: 28px;
    } (a) on the left (b) on the right (c) in the middle
38. 38.💪 Which flexbox property picks row or column? (a) flex-direction (b) display: flex (c) gap (d) justify-content
39. 39.🔍 Which is the odd one out? (a) adds space around boxes (b) makes a form box (c) sets colours and fonts (d) rounds box corners
40. 40.⚖️ What colour is the text of this element?
    <h2 class="star" id="main">Hi</h2>
    CSS:
    .star { color: purple; }
    h2 { color: green; } (a) red (b) black (c) green (d) purple

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