CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 962 · 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.✍️ Which sign goes between a property and its value? (a) : (b) - (c) ; (d) =
2. 2.🌈 Which colour of light is strongest in rgb(85, 107, 151)? (a) blue (b) red (c) green
3. 3.⚖️ What colour is the text of this element?
   <h2 class="big" id="main">Hi</h2>
   CSS:
   h2 { color: white; }
   .big { color: blue; } (a) white (b) yellow (c) red (d) blue
4. 4.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the viewport meta tag (c) the br tag (d) the hr tag
5. 5.What does font-weight do? (a) picks the font style (b) sets the letter colour (c) centres a heading (d) makes the text bold
6. 6.✍️ Which property is set to 20px in this rule?
   h1 {
     font-style: italic;
     border: 2px solid;
     font-size: 20px;
     background-color: yellow;
   } (a) 20px (b) text-align (c) background-color (d) font-size
7. 7.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 180px;
     justify-content: flex-end;
   }
   Inside are 3 boxes, each 50px wide (no margins).
8. 8.💪 Which flexbox property turns on flexbox? (a) justify-content (b) flex-direction (c) gap (d) display: flex
9. 9.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 210px;
     justify-content: flex-start;
   }
   Inside are 2 boxes, each 100px wide (no margins).
10. 10.🌈 Which hex code is blue? (a) #00ff00 (b) #ffffff (c) #00ffff (d) #0000ff
11. 11.📱 Responsive design means a page ___. (a) is only for laptops (b) never changes (c) has no pictures (d) fits every screen
12. 12.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 3 (b) 4 (c) 2 (d) 6
13. 13.True or false: img is an id selector. (a) True (b) False
14. 14.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 110px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 50px wide (no margins).
15. 15.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 170px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 40px wide (no margins).
16. 16.Which of these is the border? (a) the text or picture (b) the gap round content (c) the line round the box (d) space outside the border
17. 17.✍️ What value is given to text-align in this rule?
    h2 {
      font-size: 20px;
      text-align: center;
    } (a) center (b) text-align (c) yellow (d) 10px
18. 18.🌈 Which hex code is white? (a) #ff0000 (b) #000000 (c) #ffff00 (d) #ffffff
19. 19.🌈 Which colour is rgb(0, 255, 0)? (a) blue (b) red (c) white (d) bright green
20. 20.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 12px;
      }
    }
21. 21.🖌️ Where does the text sit on its line?
    h2 {
      font-size: 20px;
      color: white;
      text-align: left;
      background-color: orange;
    } (a) on the right (b) on the left (c) in the middle
22. 22.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 220px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 60px wide (no margins).
23. 23.🌈 Which hex code is red? (a) #00ffff (b) #000000 (c) #ffff00 (d) #ff0000
24. 24.⚖️ What colour is the text of this element?
    <h2 class="note" id="top">Hi</h2>
    CSS:
    h2 { color: red; }
    #top { color: orange; } (a) green (b) red (c) yellow (d) orange
25. 25.🎯 Which sign starts a class selector? (a) & (b) . (c) # (d) @
26. 26.🎯 Can many elements share the same class? (a) No (b) Yes
27. 27.✍️ What value is given to padding in this rule?
    .note {
      padding: 8px;
      color: red;
    } (a) 8px (b) bold (c) padding (d) 2px solid
28. 28.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      text-align: center;
      background-color: yellow;
    }
29. 29.🌈 Which colour is #000000? (a) yellow (b) blue (c) black (d) red
30. 30.🔍 Which is the odd one out? (a) makes headings and lists (b) changes the text size (c) adds space around boxes (d) rounds box corners
31. 31.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 130px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 40px wide (no margins).
32. 32.🌈 Which colour is rgb(0, 255, 255)? (a) blue (b) red (c) cyan (d) white
33. 33.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 110px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 50px wide (no margins).
34. 34.🎯 Which element does the selector p style? (a) <li id="top"> (b) <h1> (c) <h2 class="box"> (d) <p class="box">
35. 35.✍️ In color: blue; which part is the value? (a) : (b) color (c) blue (d) ;
36. 36.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      text-align: center;
      margin: 10px;
      width: 300px;
    }
37. 37.True or false: the content is space outside the border. (a) False (b) True
38. 38.🖌️ What colour is behind the letters?
    p {
      font-size: 28px;
      color: white;
      text-align: center;
      background-color: purple;
    } (a) white (b) purple (c) green
39. 39.⚖️ Which selector is the strongest? (a) an id selector (b) a class selector (c) an element selector
40. 40.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      padding: 8px;
      text-align: center;
      color: red;
    }

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