CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 243 · 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 375px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 22px;
     }
   } (a) No (b) Yes
2. 2.✍️ How many declarations (property: value pairs) are in this rule?
   h2 {
     font-style: italic;
     color: red;
     font-size: 20px;
     width: 300px;
   }
3. 3.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 28px;
     }
   }
4. 4.✍️ In color: blue; which part is the property? (a) blue (b) color (c) : (d) ;
5. 5.🎯 What kind of selector is .menu? (a) an element selector (b) an id selector (c) a class selector
6. 6.⚖️ Which selector is the strongest? (a) an id selector (b) a class selector (c) an element selector
7. 7.📦 In the box model, which part is the gap to other boxes? (a) border (b) content (c) padding (d) margin
8. 8.Which of these does JavaScript do? (a) lays out the page (b) adds space around boxes (c) changes the page live (d) sets colours and fonts
9. 9.🧩 Which language changes the page live? (a) HTML (b) CSS (c) JavaScript
10. 10.🎯 Which sign starts a class selector? (a) # (b) . (c) @ (d) &
11. 11.💪 Which flexbox property spaces boxes along a row? (a) align-items (b) flex-direction (c) display: flex (d) justify-content
12. 12.🌈 What is the biggest number one colour can have in rgb()? (a) 1000 (b) 99 (c) 100 (d) 255
13. 13.⚖️ What colour is the text of this element?
    <p class="red" id="top">Hi</p>
    CSS:
    #top { color: blue; }
    #top { color: purple; } (a) green (b) purple (c) blue (d) black
14. 14.✍️ Which sign goes between a property and its value? (a) - (b) : (c) ; (d) =
15. 15.True or false: p is an element selector. (a) False (b) True
16. 16.✍️ What is the selector in this CSS rule?
    body {
      font-size: 20px;
      font-weight: bold;
    } (a) body (b) .box (c) bold (d) font-size
17. 17.🎯 Which CSS selector matches this element?
    <li class="menu" id="main">Hello</li> (a) #logo (b) li (c) .note (d) .main
18. 18.🖌️ Where does the text sit on its line?
    p {
      font-size: 24px;
      color: white;
      text-align: right;
      background-color: blue;
    } (a) on the left (b) in the middle (c) on the right
19. 19.True or false: #hero is an id selector. (a) False (b) True
20. 20.What does justify-content: space-between 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
21. 21.🧩 Which language makes headings and lists? (a) CSS (b) JavaScript (c) HTML
22. 22.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 150px;
      padding: 5px;
      border: 3px solid black;
      margin: 5px;
    }
23. 23.🎯 Which CSS selector matches this element?
    <h1 class="red" id="top">Hello</h1> (a) #top (b) .box (c) .top (d) #red
24. 24.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 16px;
      }
    } (a) No (b) Yes
25. 25.⚖️ What colour is the text of this element?
    <h1 class="box" id="logo">Hi</h1>
    CSS:
    .box { color: green; }
    #logo { color: blue; }
    h1 { color: white; } (a) green (b) blue (c) orange (d) white
26. 26.🎯 What kind of selector is .note? (a) an element selector (b) a class selector (c) an id selector
27. 27.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    }
28. 28.🎨 A CSS file usually ends with which extension? (a) .html (b) .js (c) .css (d) .png
29. 29.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the br tag (c) the viewport meta tag (d) the title tag
30. 30.🌈 Which colour is #0000ff? (a) magenta (b) blue (c) black (d) cyan
31. 31.True or false: .big is an id selector. (a) True (b) False
32. 32.🖌️ How big is the text, in px?
    p {
      font-size: 20px;
      text-align: center;
      background-color: green;
      color: yellow;
    }
33. 33.Which of these does JavaScript do? (a) makes a form box (b) rounds box corners (c) checks a quiz answer (d) makes headings and lists
34. 34.⚖️ What colour is the text of this element?
    <h2 class="red" id="logo">Hi</h2>
    CSS:
    .red { color: red; }
    #logo { color: green; } (a) green (b) blue (c) purple (d) red
35. 35.🎨 One CSS file can style how many pages? (a) no pages (b) only one image (c) many pages (d) only one word
36. 36.⚖️ Which selector is the weakest? (a) an element selector (b) an id selector (c) a class selector
37. 37.💪 Which justify-content value puts boxes in the middle? (a) flex-end (b) space-between (c) center (d) flex-start
38. 38.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 190px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 40px wide (no margins).
39. 39.🌈 Hex digits go 0 to 9, then A to which letter? (a) Z (b) J (c) F (d) G
40. 40.🌈 Which hex code is magenta? (a) #ffffff (b) #00ff00 (c) #ff00ff (d) #00ffff

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