CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 748 · 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?
   <p class="star" id="logo">Hello</p> (a) #logo (b) .menu (c) #star (d) .logo
2. 2.🖌️ How big is the text, in px?
   p {
     font-size: 16px;
     color: red;
     background-color: purple;
     text-align: left;
   }
3. 3.⚖️ What colour is the text of this element?
   <p class="red" id="end">Hi</p>
   CSS:
   p { color: purple; }
   .red { color: blue; }
   #end { color: red; } (a) red (b) blue (c) purple (d) white
4. 4.🎯 Which element does the selector p style? (a) <h1> (b) <li id="hero"> (c) <p class="note"> (d) <h2 class="note">
5. 5.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 26px;
     }
   }
6. 6.✍️ Which property is set to 20px in this rule?
   h1 {
     font-style: italic;
     color: red;
     font-size: 20px;
     margin: 10px;
   } (a) font-size (b) text-align (c) 20px (d) background-color
7. 7.✍️ In color: blue; which part is the property? (a) color (b) : (c) blue (d) ;
8. 8.What does justify-content: flex-end 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
9. 9.🌈 Which hex code is blue? (a) #0000ff (b) #00ff00 (c) #ff00ff (d) #000000
10. 10.⚖️ What colour is the text of this element?
    <h2 class="box" id="main">Hi</h2>
    CSS:
    #main { color: red; }
    #main { color: orange; } (a) orange (b) blue (c) red (d) white
11. 11.💪 Which justify-content value packs boxes at the end? (a) center (b) flex-start (c) flex-end (d) space-between
12. 12.True or false: padding is space inside the border. (a) False (b) True
13. 13.🌈 Which colour of light is strongest in rgb(160, 28, 77)? (a) green (b) red (c) blue
14. 14.⚖️ What colour is the text of this element?
    <h2 class="big" id="hero">Hi</h2>
    CSS:
    .big { color: yellow; }
    .big { color: black; } (a) white (b) yellow (c) purple (d) black
15. 15.Which of these does HTML do? (a) shows a pop-up message (b) sets colours and fonts (c) makes a link (d) changes the page live
16. 16.⚖️ Which selector is the strongest? (a) an element selector (b) a class selector (c) an id selector
17. 17.⚖️ What colour is the text of this element?
    <p class="big" id="hero">Hi</p>
    CSS:
    .big { color: red; }
    #hero { color: green; }
    p { color: purple; } (a) blue (b) red (c) green (d) purple
18. 18.True or false: HTML makes a link. (a) False (b) True
19. 19.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 18px;
      }
    }
20. 20.True or false: JavaScript makes a form box. (a) True (b) False
21. 21.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 90px;
      padding: 5px;
      border: 5px solid black;
      margin: 15px;
    }
22. 22.What does font-weight do? (a) makes the text bold (b) colours behind the text (c) makes letters bigger (d) sets the letter colour
23. 23.🧩 Which language makes a form box? (a) JavaScript (b) HTML (c) CSS
24. 24.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 220px;
      padding: 25px;
      border: 3px solid black;
      margin: 10px;
    }
25. 25.✍️ In color: blue; which part is the value? (a) : (b) ; (c) blue (d) color
26. 26.🖌️ Which CSS property makes letters bigger? (a) background-color (b) color (c) font-size (d) text-align
27. 27.💪 Which flexbox property picks row or column? (a) align-items (b) justify-content (c) flex-direction (d) gap
28. 28.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 80px;
      padding: 30px;
      border: 3px solid black;
      margin: 0px;
    }
29. 29.🎯 Which sign starts a class selector? (a) @ (b) . (c) & (d) #
30. 30.✍️ What is the selector in this CSS rule?
    p {
      padding: 8px;
      width: 300px;
      font-size: 20px;
      text-align: center;
    } (a) p (b) 300px (c) padding (d) .note
31. 31.True or false: padding is space outside the border. (a) True (b) False
32. 32.🎯 What kind of selector is .note? (a) a class selector (b) an id selector (c) an element selector
33. 33.Which of these is padding? (a) the gap round content (b) the line round the box (c) the text or picture (d) space outside the border
34. 34.What does justify-content: space-between do? (a) packs boxes at the end (b) puts boxes in the middle (c) packs boxes at the start (d) equal gaps, none at ends
35. 35.🖌️ What colour are the letters?
    p {
      text-align: right;
      font-size: 16px;
      background-color: green;
      color: orange;
    } (a) green (b) yellow (c) orange
36. 36.🧩 Which language gives the page structure? (a) CSS (b) HTML (c) JavaScript
37. 37.🌈 In #000081 the blue part is the hex number 81. What is it as a normal number?
38. 38.⚖️ 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
39. 39.✍️ What is the selector in this CSS rule?
    .note {
      padding: 8px;
      width: 300px;
      background-color: yellow;
    } (a) 300px (b) padding (c) #top (d) .note
40. 40.🌈 Which hex code is bright green? (a) #ffffff (b) #000000 (c) #00ff00 (d) #ff00ff

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