CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 401 · 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 big is the text, in px?
   h1 {
     text-align: center;
     color: green;
     font-size: 12px;
     background-color: orange;
   }
2. 2.🧩 Which language shows a pop-up message? (a) CSS (b) HTML (c) JavaScript
3. 3.✍️ How many declarations (property: value pairs) are in this rule?
   h1 {
     margin: 10px;
     font-size: 20px;
     font-style: italic;
     border: 2px solid;
   }
4. 4.🖌️ Where does the text sit on its line?
   h1 {
     background-color: purple;
     color: yellow;
     text-align: right;
     font-size: 32px;
   } (a) on the left (b) on the right (c) in the middle
5. 5.✍️ CSS declarations go inside which brackets? (a) ( ) (b) < > (c) { } (d) [ ]
6. 6.✍️ Which sign goes between a property and its value? (a) = (b) - (c) ; (d) :
7. 7.⚖️ What colour is the text of this element?
   <p class="menu" id="intro">Hi</p>
   CSS:
   #intro { color: red; }
   #intro { color: black; } (a) blue (b) white (c) red (d) black
8. 8.🔍 Which is the odd one out? (a) makes a link (b) checks a quiz answer (c) reacts to a button click (d) counts down a timer
9. 9.🌈 Hex digits go 0 to 9, then A to which letter? (a) G (b) J (c) Z (d) F
10. 10.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 230px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 50px wide (no margins).
11. 11.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) neither (c) the shorter one (d) the later one
12. 12.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 100px;
      padding: 30px;
      border: 1px solid black;
      margin: 15px;
    }
13. 13.True or false: JavaScript puts a picture on a page. (a) True (b) False
14. 14.🌈 Which colour is #ffffff? (a) black (b) white (c) magenta (d) bright green
15. 15.🔍 Which is the odd one out? (a) adds space around boxes (b) rounds box corners (c) makes a form box (d) lays out the page
16. 16.🎯 Which CSS selector matches this element?
    <div class="box" id="main">Hello</div> (a) #box (b) .star (c) .main (d) div
17. 17.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      padding: 8px;
      border: 2px solid;
      background-color: yellow;
    }
18. 18.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    }
19. 19.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 6px;
      }
    } (a) No (b) Yes
20. 20.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 6px;
      }
    }
21. 21.💪 Which flexbox property picks row or column? (a) gap (b) flex-direction (c) align-items (d) justify-content
22. 22.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) 600px or narrower (c) exactly 1000px (d) turned off
23. 23.⚖️ What colour is the text of this element?
    <p class="star" id="end">Hi</p>
    CSS:
    #end { color: purple; }
    .star { color: blue; } (a) green (b) blue (c) purple (d) orange
24. 24.⚖️ What colour is the text of this element?
    <h1 class="box" id="logo">Hi</h1>
    CSS:
    #logo { color: purple; }
    h1 { color: red; }
    .box { color: orange; } (a) blue (b) orange (c) red (d) purple
25. 25.⚖️ Which selector is the weakest? (a) an element selector (b) an id selector (c) a class selector
26. 26.🌈 Which colour of light is strongest in rgb(132, 14, 204)? (a) green (b) blue (c) red
27. 27.💪 Which flexbox property sets space between boxes? (a) gap (b) justify-content (c) align-items (d) flex-direction
28. 28.✍️ What value is given to background-color in this rule?
    h2 {
      margin: 10px;
      background-color: yellow;
      width: 300px;
    } (a) 8px (b) background-color (c) 10px (d) yellow
29. 29.Which of these is margin? (a) the line round the box (b) the gap round content (c) space outside the border (d) space inside the border
30. 30.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 230px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 50px wide (no margins).
31. 31.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 80px;
      padding: 5px;
      border: 5px solid black;
      margin: 0px;
    }
32. 32.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    } (a) No (b) Yes
33. 33.🖌️ Where does the text sit on its line?
    p {
      font-size: 20px;
      color: white;
      background-color: purple;
      text-align: left;
    } (a) on the left (b) on the right (c) in the middle
34. 34.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 22px;
      }
    } (a) Yes (b) No
35. 35.🌈 Which hex code is cyan? (a) #ffff00 (b) #00ffff (c) #0000ff (d) #00ff00
36. 36.🎯 Which element does the selector span style? (a) <p> (b) <h1 class="menu"> (c) <h2 id="logo"> (d) <span class="menu">
37. 37.🧩 Which language gives the page structure? (a) JavaScript (b) CSS (c) HTML
38. 38.✍️ Which property is set to 2px solid in this rule?
    h2 {
      font-style: italic;
      border: 2px solid;
      font-size: 20px;
      text-align: center;
    } (a) border (b) 2px solid (c) width (d) font-style
39. 39.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 300px;
      padding: 5px;
      border: 2px solid black;
      margin: 15px;
    }
40. 40.What does justify-content: flex-start do? (a) puts boxes in the middle (b) equal gaps, none at ends (c) packs boxes at the start (d) packs boxes at the end

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