CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 111 · 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.✍️ What is the selector in this CSS rule?
   li {
     width: 300px;
     text-align: center;
     border: 2px solid;
     background-color: yellow;
   } (a) center (b) body (c) width (d) li
2. 2.📦 In the box model, which part is a solid or dotted edge? (a) padding (b) margin (c) border (d) content
3. 3.What does justify-content: space-between do? (a) puts boxes in the middle (b) packs boxes at the start (c) equal gaps, none at ends (d) packs boxes at the end
4. 4.✍️ CSS declarations go inside which brackets? (a) [ ] (b) ( ) (c) { } (d) < >
5. 5.🎯 What kind of selector is #end? (a) an element selector (b) an id selector (c) a class selector
6. 6.🎯 Which element does the selector #end style? (a) <p class="note"> (b) <span id="hero"> (c) <span class="end"> (d) <span id="end">
7. 7.💪 Which justify-content value equal gaps, none at ends? (a) center (b) flex-end (c) space-between (d) flex-start
8. 8.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 18px;
     }
   }
9. 9.💪 Which justify-content value puts boxes in the middle? (a) space-between (b) flex-start (c) center (d) flex-end
10. 10.✍️ Which property is set to 8px in this rule?
    .note {
      padding: 8px;
      font-weight: bold;
    } (a) 8px (b) border (c) padding (d) font-weight
11. 11.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
12. 12.📦 In the box model, which part is space inside the border? (a) content (b) border (c) margin (d) padding
13. 13.⚖️ What colour is the text of this element?
    <h2 class="box" id="top">Hi</h2>
    CSS:
    #top { color: blue; }
    #top { color: yellow; } (a) yellow (b) orange (c) red (d) blue
14. 14.📱 What does a media query check? (a) the page title (b) the time of day (c) the screen width (d) the battery level
15. 15.🎯 Which CSS selector matches this element?
    <li class="box" id="top">Hello</li> (a) .top (b) #top (c) div (d) .star
16. 16.🎯 Which CSS selector matches this element?
    <li class="big" id="top">Hello</li> (a) .big (b) .red (c) #intro (d) .top
17. 17.🌈 Which hex code is red? (a) #ffffff (b) #ffff00 (c) #ff00ff (d) #ff0000
18. 18.What does background-color do? (a) sets the letter colour (b) makes letters bigger (c) centres a heading (d) colours behind the text
19. 19.📱 Responsive design means a page ___. (a) has no pictures (b) fits every screen (c) is only for laptops (d) never changes
20. 20.🖌️ Which CSS property sets the letter colour? (a) font-size (b) font-family (c) color (d) text-align
21. 21.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 200px;
      justify-content: center;
    }
    Inside are 2 boxes, each 50px wide (no margins).
22. 22.🖌️ Which CSS property makes letters bigger? (a) color (b) font-size (c) text-align (d) font-weight
23. 23.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 26px;
      }
    }
24. 24.🎯 What kind of selector is #logo? (a) an id selector (b) a class selector (c) an element selector
25. 25.🎯 Can many elements share the same class? (a) No (b) Yes
26. 26.🎯 Which element does the selector #top style? (a) <h1 id="top"> (b) <h2 class="box"> (c) <h1 id="intro"> (d) <h1 class="top">
27. 27.🎯 Which CSS selector matches this element?
    <div class="star" id="end">Hello</div> (a) .star (b) span (c) .end (d) .menu
28. 28.🧩 Which language rounds box corners? (a) CSS (b) HTML (c) JavaScript
29. 29.Which of these is margin? (a) the line round the box (b) the text or picture (c) the gap to other boxes (d) a solid or dotted edge
30. 30.Which of these does JavaScript do? (a) changes the text size (b) makes a form box (c) changes the page live (d) sets colours and fonts
31. 31.🎯 Which CSS selector matches this element?
    <li class="menu" id="hero">Hello</li> (a) #top (b) .menu (c) div (d) .note
32. 32.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 160px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 50px wide (no margins).
33. 33.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the viewport meta tag (c) the br tag (d) the title tag
34. 34.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the later one (c) neither (d) the shorter one
35. 35.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      font-size: 20px;
    }
36. 36.🎨 Which tag connects an outside CSS file? (a) <img> (b) <css> (c) <a> (d) <link>
37. 37.🌈 Which colour of light is strongest in rgb(13, 134, 162)? (a) red (b) blue (c) green
38. 38.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 4 (b) 2 (c) 3 (d) 6
39. 39.What does font-weight do? (a) centres a heading (b) colours behind the text (c) sets the letter colour (d) makes the text bold
40. 40.🎯 Which CSS selector matches this element?
    <p class="big" id="logo">Hello</p> (a) .logo (b) #logo (c) h1 (d) #end

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