CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 105 · 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 element does the selector li style? (a) <li class="menu"> (b) <div> (c) <span class="menu"> (d) <p id="logo">
2. 2.🎯 Which sign starts a class selector? (a) @ (b) . (c) & (d) #
3. 3.Which of these is the content? (a) space inside the border (b) space outside the border (c) the text or picture (d) the gap to other boxes
4. 4.✍️ What value is given to border in this rule?
   p {
     text-align: center;
     border: 2px solid;
     font-weight: bold;
   } (a) 2px solid (b) border (c) italic (d) 300px
5. 5.📱 The screen is 1366px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 24px;
     }
   } (a) Yes (b) No
6. 6.✍️ CSS declarations go inside which brackets? (a) < > (b) [ ] (c) { } (d) ( )
7. 7.💪 Which justify-content value packs boxes at the end? (a) center (b) space-between (c) flex-end (d) flex-start
8. 8.What does justify-content: flex-start 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
9. 9.🔍 Which is the odd one out? (a) makes a form box (b) makes a link (c) changes the text size (d) gives the page structure
10. 10.🔍 Which is the odd one out? (a) changes the page live (b) sets colours and fonts (c) shows a pop-up message (d) reacts to a button click
11. 11.💪 Which flexbox property spaces boxes along a row? (a) display: flex (b) flex-direction (c) justify-content (d) gap
12. 12.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    }
13. 13.🎨 Which tag connects an outside CSS file? (a) <img> (b) <link> (c) <a> (d) <css>
14. 14.✍️ What is the selector in this CSS rule?
    h1 {
      background-color: yellow;
      border: 2px solid;
      padding: 8px;
    } (a) background-color (b) p (c) 2px solid (d) h1
15. 15.⚖️ What colour is the text of this element?
    <p class="menu" id="main">Hi</p>
    CSS:
    #main { color: red; }
    .menu { color: white; } (a) red (b) purple (c) orange (d) white
16. 16.💪 Which flexbox property picks row or column? (a) justify-content (b) flex-direction (c) gap (d) display: flex
17. 17.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 300px;
      justify-content: center;
    }
    Inside are 3 boxes, each 60px wide (no margins).
18. 18.✍️ In color: blue; which part is the value? (a) color (b) ; (c) : (d) blue
19. 19.🎨 A CSS file usually ends with which extension? (a) .js (b) .html (c) .css (d) .png
20. 20.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
21. 21.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) turned off (c) 600px or wider (d) 600px or narrower
22. 22.✍️ What is the selector in this CSS rule?
    h2 {
      color: red;
      background-color: yellow;
      font-size: 20px;
    } (a) yellow (b) color (c) h1 (d) h2
23. 23.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 190px;
      padding: 25px;
      border: 4px solid black;
      margin: 5px;
    }
24. 24.✍️ What is the selector in this CSS rule?
    h1 {
      width: 300px;
      padding: 8px;
    } (a) width (b) h1 (c) 8px (d) p
25. 25.📱 min-width: 800px applies when the screen is ___. (a) exactly 100px (b) 800px or wider (c) 800px or narrower (d) turned off
26. 26.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    }
27. 27.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the first one (c) the shorter one (d) the later one
28. 28.🌈 Which colour is #ff00ff? (a) bright green (b) cyan (c) black (d) magenta
29. 29.⚖️ What colour is the text of this element?
    <h1 class="menu" id="logo">Hi</h1>
    CSS:
    h1 { color: purple; }
    h1 { color: black; } (a) purple (b) black (c) blue (d) white
30. 30.What does justify-content: center 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
31. 31.🖌️ Which CSS property colours behind the text? (a) text-align (b) font-weight (c) color (d) background-color
32. 32.🖌️ What colour are the letters?
    h2 {
      font-size: 12px;
      background-color: green;
      text-align: right;
      color: blue;
    } (a) red (b) green (c) blue
33. 33.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      width: 300px;
      text-align: center;
    }
34. 34.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the br tag (c) the viewport meta tag (d) the hr tag
35. 35.📦 In the box model, which part is the gap round content? (a) padding (b) margin (c) content (d) border
36. 36.🎯 Which element does the selector #main style? (a) <div id="main"> (b) <div id="logo"> (c) <div class="main"> (d) <span class="star">
37. 37.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 20px;
      }
    }
38. 38.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 24px;
      }
    } (a) Yes (b) No
39. 39.🧩 Which language makes headings and lists? (a) CSS (b) JavaScript (c) HTML
40. 40.What does justify-content: flex-end do? (a) packs boxes at the start (b) packs boxes at the end (c) equal gaps, none at ends (d) puts boxes in the middle

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