CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 476 · 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.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 20px;
     }
   }
2. 2.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 140px;
     padding: 10px;
     border: 4px solid black;
     margin: 5px;
   }
3. 3.🖌️ What colour is behind the letters?
   p {
     font-size: 12px;
     background-color: purple;
     color: blue;
     text-align: left;
   } (a) blue (b) black (c) purple
4. 4.🧩 Which language adds space around boxes? (a) CSS (b) JavaScript (c) HTML
5. 5.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 32px;
     }
   }
6. 6.📱 Responsive design means a page ___. (a) fits every screen (b) is only for laptops (c) has no pictures (d) never changes
7. 7.🎯 Which CSS selector matches this element?
   <div class="menu" id="top">Hello</div> (a) #menu (b) span (c) .menu (d) #intro
8. 8.📦 In the box model, which part is space outside the border? (a) border (b) margin (c) padding (d) content
9. 9.Which of these is margin? (a) space inside the border (b) the text or picture (c) space outside the border (d) the gap round content
10. 10.✍️ What value is given to font-weight in this rule?
    #top {
      font-weight: bold;
      font-size: 20px;
    } (a) 2px solid (b) font-weight (c) 300px (d) bold
11. 11.⚖️ What colour is the text of this element?
    <h1 class="note" id="end">Hi</h1>
    CSS:
    .note { color: yellow; }
    .note { color: white; } (a) yellow (b) blue (c) red (d) white
12. 12.🖌️ Which CSS property colours behind the text? (a) font-size (b) color (c) font-weight (d) background-color
13. 13.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the later one (c) the first one (d) the shorter one
14. 14.🎯 Which element does the selector span style? (a) <span class="note"> (b) <h2 id="top"> (c) <h1 class="note"> (d) <p>
15. 15.🎯 Which CSS selector matches this element?
    <h1 class="note" id="main">Hello</h1> (a) #main (b) .big (c) #logo (d) h2
16. 16.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 230px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 50px wide (no margins).
17. 17.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 60px;
      padding: 30px;
      border: 3px solid black;
      margin: 0px;
    }
18. 18.What does justify-content: center do? (a) packs boxes at the end (b) puts boxes in the middle (c) equal gaps, none at ends (d) packs boxes at the start
19. 19.🖌️ What colour is behind the letters?
    p {
      color: purple;
      text-align: right;
      font-size: 16px;
      background-color: yellow;
    } (a) purple (b) black (c) yellow
20. 20.✍️ What value is given to font-weight in this rule?
    h2 {
      padding: 8px;
      margin: 10px;
      color: red;
      font-weight: bold;
    } (a) 2px solid (b) bold (c) 300px (d) font-weight
21. 21.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 260px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 80px wide (no margins).
22. 22.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      text-align: center;
    }
23. 23.🌈 Which hex code is cyan? (a) #000000 (b) #00ffff (c) #00ff00 (d) #ff0000
24. 24.🌈 Which colour is #ff0000? (a) red (b) blue (c) magenta (d) bright green
25. 25.📦 In the box model, which part is a solid or dotted edge? (a) content (b) padding (c) margin (d) border
26. 26.⚖️ What colour is the text of this element?
    <p class="star" id="top">Hi</p>
    CSS:
    .star { color: green; }
    .star { color: blue; } (a) yellow (b) green (c) blue (d) white
27. 27.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 290px;
      padding: 10px;
      border: 1px solid black;
      margin: 0px;
    }
28. 28.Which of these is margin? (a) the gap round content (b) space inside the border (c) the gap to other boxes (d) a solid or dotted edge
29. 29.What does text-align do? (a) makes letters bigger (b) colours behind the text (c) makes the text bold (d) centres a heading
30. 30.🎯 Which element does the selector li style? (a) <span class="big"> (b) <p id="top"> (c) <div> (d) <li class="big">
31. 31.🎨 Which tag connects an outside CSS file? (a) <link> (b) <a> (c) <img> (d) <css>
32. 32.🎯 Which element does the selector h2 style? (a) <h2 class="note"> (b) <div class="note"> (c) <li> (d) <span id="hero">
33. 33.🖌️ How big is the text, in px?
    h2 {
      font-size: 16px;
      color: black;
      background-color: orange;
      text-align: left;
    }
34. 34.What does background-color do? (a) sets the letter colour (b) colours behind the text (c) makes letters bigger (d) centres a heading
35. 35.💪 Which justify-content value packs boxes at the start? (a) space-between (b) center (c) flex-start (d) flex-end
36. 36.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
37. 37.True or false: JavaScript makes a link. (a) True (b) False
38. 38.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 70px;
      padding: 30px;
      border: 4px solid black;
      margin: 5px;
    }
39. 39.🧩 Which language reacts to a button click? (a) JavaScript (b) CSS (c) HTML
40. 40.📦 In the box model, which part is the line round the box? (a) margin (b) padding (c) content (d) border

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