CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 997 · 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 is the selector in this CSS rule?
   h2 {
     font-style: italic;
     border: 2px solid;
   } (a) h2 (b) 2px solid (c) h1 (d) font-style
2. 2.🎯 Which element does the selector .menu style? (a) <h1 class="big"> (b) <p class="menu"> (c) <p id="menu"> (d) <p class="note">
3. 3.📦 In the box model, which part is space outside the border? (a) margin (b) padding (c) border (d) content
4. 4.⚖️ What colour is the text of this element?
   <p class="star" id="top">Hi</p>
   CSS:
   p { color: blue; }
   .star { color: orange; }
   #top { color: green; } (a) blue (b) green (c) white (d) orange
5. 5.🎯 What kind of selector is #main? (a) a class selector (b) an id selector (c) an element selector
6. 6.🌈 Which colour of light is strongest in rgb(88, 206, 51)? (a) green (b) blue (c) red
7. 7.💪 Which justify-content value packs boxes at the end? (a) flex-end (b) flex-start (c) center (d) space-between
8. 8.🖌️ What colour is behind the letters?
   h1 {
     color: blue;
     text-align: right;
     background-color: red;
     font-size: 28px;
   } (a) red (b) white (c) blue
9. 9.✍️ What is the selector in this CSS rule?
   h1 {
     color: red;
     font-size: 20px;
   } (a) 20px (b) color (c) p (d) h1
10. 10.🖌️ How big is the text, in px?
    p {
      color: blue;
      background-color: purple;
      font-size: 20px;
      text-align: right;
    }
11. 11.📱 min-width: 800px applies when the screen is ___. (a) turned off (b) exactly 100px (c) 800px or wider (d) 800px or narrower
12. 12.🌈 Which hex code is yellow? (a) #ff00ff (b) #ffffff (c) #00ff00 (d) #ffff00
13. 13.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 190px;
      padding: 15px;
      border: 5px solid black;
      margin: 5px;
    }
14. 14.✍️ In color: blue; which part is the value? (a) color (b) blue (c) : (d) ;
15. 15.🔍 Which is the odd one out? (a) changes the text size (b) makes a link (c) makes headings and lists (d) makes a form box
16. 16.🎯 Can many elements share the same class? (a) Yes (b) No
17. 17.🎯 What kind of selector is .big? (a) an element selector (b) an id selector (c) a class selector
18. 18.🖌️ Where does the text sit on its line?
    p {
      text-align: left;
      font-size: 28px;
      background-color: blue;
      color: red;
    } (a) on the right (b) in the middle (c) on the left
19. 19.✍️ What value is given to background-color in this rule?
    h2 {
      color: red;
      background-color: yellow;
      font-style: italic;
    } (a) 10px (b) 8px (c) background-color (d) yellow
20. 20.🎯 Which element does the selector div style? (a) <span> (b) <h1 id="end"> (c) <div class="big"> (d) <p class="big">
21. 21.🌈 Which colour of light is strongest in rgb(19, 233, 21)? (a) blue (b) green (c) red
22. 22.Which of these is padding? (a) the gap to other boxes (b) the gap round content (c) a solid or dotted edge (d) space outside the border
23. 23.✍️ Which sign ends each CSS declaration? (a) : (b) , (c) ; (d) .
24. 24.⚖️ What colour is the text of this element?
    <h1 class="menu" id="logo">Hi</h1>
    CSS:
    h1 { color: black; }
    h1 { color: white; } (a) white (b) green (c) black (d) red
25. 25.✍️ What value is given to color in this rule?
    p {
      font-size: 20px;
      margin: 10px;
      font-style: italic;
      color: red;
    } (a) 20px (b) color (c) center (d) red
26. 26.✍️ What is the selector in this CSS rule?
    .box {
      color: red;
      border: 2px solid;
      font-size: 20px;
      width: 300px;
    } (a) color (b) 2px solid (c) .box (d) h2
27. 27.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 220px;
      padding: 5px;
      border: 4px solid black;
      margin: 10px;
    }
28. 28.True or false: .card is an element selector. (a) True (b) False
29. 29.🌈 Which colour is #ffffff? (a) magenta (b) yellow (c) white (d) cyan
30. 30.🌈 In #5d0000 the red part is the hex number 5d. What is it as a normal number?
31. 31.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 120px;
      padding: 25px;
      border: 5px solid black;
      margin: 15px;
    }
32. 32.🎯 What kind of selector is .note? (a) an id selector (b) a class selector (c) an element selector
33. 33.⚖️ What colour is the text of this element?
    <p class="note" id="logo">Hi</p>
    CSS:
    #logo { color: purple; }
    #logo { color: red; } (a) black (b) purple (c) red (d) green
34. 34.⚖️ What colour is the text of this element?
    <h2 class="big" id="intro">Hi</h2>
    CSS:
    #intro { color: red; }
    #intro { color: purple; } (a) purple (b) yellow (c) red (d) green
35. 35.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 300px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 60px wide (no margins).
36. 36.🎯 What kind of selector is p? (a) an element selector (b) a class selector (c) an id selector
37. 37.🎯 Which sign starts an id selector? (a) @ (b) . (c) & (d) #
38. 38.What does justify-content: flex-start do? (a) puts boxes in the middle (b) packs boxes at the start (c) equal gaps, none at ends (d) packs boxes at the end
39. 39.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 6px;
      }
    } (a) Yes (b) No
40. 40.🖌️ Which CSS property makes the text bold? (a) text-align (b) font-weight (c) background-color (d) font-size

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