CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 647 · 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 language reacts to a button click? (a) JavaScript (b) HTML (c) CSS
2. 2.Which of these is margin? (a) space inside the border (b) the gap to other boxes (c) a solid or dotted edge (d) the gap round content
3. 3.🌈 Which colour is rgb(255, 0, 0)? (a) cyan (b) magenta (c) red (d) blue
4. 4.✍️ Which sign ends each CSS declaration? (a) , (b) . (c) : (d) ;
5. 5.⚖️ Which selector is the strongest? (a) an element selector (b) a class selector (c) an id selector
6. 6.What does color do? (a) sets the letter colour (b) picks the font style (c) makes letters bigger (d) colours behind the text
7. 7.🖌️ Where does the text sit on its line?
   p {
     background-color: red;
     font-size: 28px;
     color: blue;
     text-align: left;
   } (a) on the right (b) on the left (c) in the middle
8. 8.💪 Which flexbox property picks row or column? (a) align-items (b) flex-direction (c) display: flex (d) justify-content
9. 9.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 22px;
     }
   }
10. 10.True or false: body is a class selector. (a) False (b) True
11. 11.True or false: img is an element selector. (a) True (b) False
12. 12.✍️ What value is given to border in this rule?
    .note {
      border: 2px solid;
      color: red;
      margin: 10px;
      font-size: 20px;
    } (a) italic (b) 2px solid (c) border (d) 300px
13. 13.🎯 Which element does the selector .box style? (a) <h2 class="box"> (b) <li class="menu"> (c) <h2 class="star"> (d) <h2 id="box">
14. 14.💪 Which justify-content value packs boxes at the start? (a) flex-start (b) flex-end (c) center (d) space-between
15. 15.🎨 Which tag connects an outside CSS file? (a) <css> (b) <img> (c) <a> (d) <link>
16. 16.📱 Responsive design means a page ___. (a) is only for laptops (b) has no pictures (c) never changes (d) fits every screen
17. 17.✍️ In color: blue; which part is the property? (a) color (b) ; (c) : (d) blue
18. 18.🎯 What kind of selector is #main? (a) an id selector (b) an element selector (c) a class selector
19. 19.🌈 Which colour is #00ffff? (a) cyan (b) blue (c) red (d) white
20. 20.Which of these is padding? (a) the text or picture (b) the gap round content (c) a solid or dotted edge (d) the gap to other boxes
21. 21.Which of these does HTML do? (a) shows a pop-up message (b) puts a picture on a page (c) rounds box corners (d) lays out the page
22. 22.🌈 Which colour is #0000ff? (a) cyan (b) white (c) red (d) blue
23. 23.🎨 Which attribute adds CSS inside one tag? (a) href (b) src (c) alt (d) style
24. 24.What does justify-content: flex-start do? (a) packs boxes at the end (b) packs boxes at the start (c) puts boxes in the middle (d) equal gaps, none at ends
25. 25.🎯 Which sign starts an id selector? (a) & (b) . (c) # (d) @
26. 26.True or false: CSS makes headings and lists. (a) True (b) False
27. 27.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 270px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 100px wide (no margins).
28. 28.🎯 What kind of selector is #end? (a) a class selector (b) an id selector (c) an element selector
29. 29.🖌️ What colour is behind the letters?
    h2 {
      font-size: 28px;
      text-align: center;
      color: orange;
      background-color: black;
    } (a) yellow (b) black (c) orange
30. 30.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 230px;
      justify-content: center;
    }
    Inside are 3 boxes, each 50px wide (no margins).
31. 31.💪 Which justify-content value equal gaps, none at ends? (a) center (b) flex-end (c) space-between (d) flex-start
32. 32.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 6px;
      }
    }
33. 33.🖌️ What colour is behind the letters?
    h2 {
      color: white;
      text-align: center;
      background-color: black;
      font-size: 12px;
    } (a) blue (b) white (c) black
34. 34.⚖️ What colour is the text of this element?
    <h1 class="box" id="main">Hi</h1>
    CSS:
    h1 { color: blue; }
    .box { color: yellow; }
    #main { color: black; } (a) orange (b) black (c) yellow (d) blue
35. 35.✍️ What value is given to font-size in this rule?
    #top {
      font-size: 20px;
      padding: 8px;
      color: red;
    } (a) yellow (b) 20px (c) font-size (d) center
36. 36.True or false: HTML sets colours and fonts. (a) True (b) False
37. 37.🎯 Which CSS selector matches this element?
    <li class="menu" id="main">Hello</li> (a) #menu (b) .menu (c) .main (d) .note
38. 38.What does justify-content: space-between do? (a) packs boxes at the end (b) equal gaps, none at ends (c) packs boxes at the start (d) puts boxes in the middle
39. 39.⚖️ What colour is the text of this element?
    <p class="red" id="main">Hi</p>
    CSS:
    #main { color: white; }
    .red { color: black; }
    p { color: blue; } (a) green (b) white (c) black (d) blue
40. 40.🌈 Which colour is #ff00ff? (a) red (b) magenta (c) white (d) yellow

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