CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 761 · 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 CSS selector matches this element?
   <h1 class="box" id="top">Hello</h1> (a) .star (b) h2 (c) h1 (d) #box
2. 2.True or false: JavaScript makes a form box. (a) False (b) True
3. 3.✍️ Which property is set to center in this rule?
   h2 {
     text-align: center;
     color: red;
     font-size: 20px;
   } (a) text-align (b) margin (c) background-color (d) center
4. 4.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 20px;
     }
   }
5. 5.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 280px;
     padding: 15px;
     border: 1px solid black;
     margin: 0px;
   }
6. 6.📱 The screen is 820px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 26px;
     }
   } (a) Yes (b) No
7. 7.📦 In the box model, which part is the gap to other boxes? (a) content (b) margin (c) border (d) padding
8. 8.🧩 Which language checks a quiz answer? (a) HTML (b) JavaScript (c) CSS
9. 9.💪 Which flexbox property lines boxes up across? (a) gap (b) justify-content (c) align-items (d) display: flex
10. 10.🖌️ Which CSS property sets the letter colour? (a) text-align (b) font-weight (c) color (d) background-color
11. 11.🎯 Which CSS selector matches this element?
    <h1 class="red" id="main">Hello</h1> (a) #logo (b) .box (c) .red (d) #red
12. 12.🎯 Which element does the selector .red style? (a) <h1 class="star"> (b) <p class="box"> (c) <p class="red"> (d) <p id="red">
13. 13.What does background-color do? (a) makes letters bigger (b) colours behind the text (c) centres a heading (d) makes the text bold
14. 14.✍️ In color: blue; which part is the value? (a) blue (b) : (c) ; (d) color
15. 15.True or false: .big is a class selector. (a) True (b) False
16. 16.True or false: the content is the line round the box. (a) True (b) False
17. 17.True or false: margin is the gap round content. (a) False (b) True
18. 18.What does justify-content: flex-end do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the end (d) packs boxes at the start
19. 19.🖌️ Which CSS property makes letters bigger? (a) font-family (b) color (c) text-align (d) font-size
20. 20.📱 min-width: 800px applies when the screen is ___. (a) turned off (b) 800px or wider (c) 800px or narrower (d) exactly 100px
21. 21.🖌️ Which CSS property makes the text bold? (a) color (b) text-align (c) font-weight (d) background-color
22. 22.🎯 Which element does the selector .star style? (a) <span class="star"> (b) <span class="menu"> (c) <p class="note"> (d) <span id="star">
23. 23.🌈 Which colour of light is strongest in rgb(179, 62, 87)? (a) red (b) blue (c) green
24. 24.🎯 What kind of selector is #end? (a) a class selector (b) an element selector (c) an id selector
25. 25.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 250px;
      padding: 15px;
      border: 1px solid black;
      margin: 20px;
    }
26. 26.⚖️ Which selector is the strongest? (a) an element selector (b) an id selector (c) a class selector
27. 27.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) turned off (c) exactly 1000px (d) 600px or narrower
28. 28.🖌️ What colour are the letters?
    h2 {
      background-color: purple;
      font-size: 32px;
      color: yellow;
      text-align: right;
    } (a) purple (b) yellow (c) green
29. 29.Which of these is padding? (a) the gap round content (b) the text or picture (c) the line round the box (d) the gap to other boxes
30. 30.🌈 Which hex code is black? (a) #0000ff (b) #ffff00 (c) #ffffff (d) #000000
31. 31.✍️ Which property is set to bold in this rule?
    .note {
      border: 2px solid;
      font-size: 20px;
      color: red;
      font-weight: bold;
    } (a) border (b) width (c) bold (d) font-weight
32. 32.🎨 A CSS file usually ends with which extension? (a) .html (b) .js (c) .png (d) .css
33. 33.✍️ What is the selector in this CSS rule?
    li {
      padding: 8px;
      background-color: yellow;
      font-size: 20px;
      border: 2px solid;
    } (a) padding (b) yellow (c) body (d) li
34. 34.What does font-size do? (a) makes letters bigger (b) centres a heading (c) colours behind the text (d) makes the text bold
35. 35.📦 In the box model, which part is space inside the border? (a) content (b) padding (c) margin (d) border
36. 36.🎯 Which sign starts a class selector? (a) & (b) # (c) @ (d) .
37. 37.✍️ What value is given to background-color in this rule?
    h2 {
      padding: 8px;
      border: 2px solid;
      background-color: yellow;
    } (a) 8px (b) yellow (c) background-color (d) 10px
38. 38.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 22px;
      }
    }
39. 39.🖌️ What colour is behind the letters?
    h1 {
      background-color: orange;
      text-align: left;
      color: black;
      font-size: 12px;
    } (a) red (b) black (c) orange
40. 40.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 90px;
      padding: 10px;
      border: 3px solid black;
      margin: 0px;
    }

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