CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 98 · 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 540px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 28px;
     }
   } (a) Yes (b) No
2. 2.🌈 Which hex code is yellow? (a) #ff00ff (b) #0000ff (c) #ffff00 (d) #00ff00
3. 3.📱 The screen is 1366px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 26px;
     }
   } (a) Yes (b) No
4. 4.🎨 Which tag connects an outside CSS file? (a) <link> (b) <css> (c) <a> (d) <img>
5. 5.🎯 Which CSS selector matches this element?
   <li class="box" id="logo">Hello</li> (a) #end (b) .star (c) .box (d) #box
6. 6.🎨 Which attribute adds CSS inside one tag? (a) style (b) alt (c) src (d) href
7. 7.✍️ Which sign ends each CSS declaration? (a) , (b) : (c) . (d) ;
8. 8.🎯 What kind of selector is .note? (a) an element selector (b) a class selector (c) an id selector
9. 9.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 150px;
     justify-content: flex-end;
   }
   Inside are 2 boxes, each 60px wide (no margins).
10. 10.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the hr tag (c) the br tag (d) the viewport meta tag
11. 11.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    } (a) Yes (b) No
12. 12.💪 Which flexbox property spaces boxes along a row? (a) gap (b) flex-direction (c) display: flex (d) justify-content
13. 13.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      background-color: yellow;
      width: 300px;
      padding: 8px;
    }
14. 14.✍️ What is the selector in this CSS rule?
    h2 {
      margin: 10px;
      border: 2px solid;
    } (a) h1 (b) margin (c) 2px solid (d) h2
15. 15.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 140px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 40px wide (no margins).
16. 16.✍️ What is the selector in this CSS rule?
    p {
      margin: 10px;
      font-size: 20px;
      width: 300px;
      border: 2px solid;
    } (a) 20px (b) margin (c) p (d) .note
17. 17.🎯 How many elements on a page should have the same id? (a) 2 (b) 5 (c) 1 (d) any number
18. 18.True or false: h1 is a class selector. (a) True (b) False
19. 19.🖌️ How big is the text, in px?
    h2 {
      font-size: 16px;
      text-align: center;
      color: yellow;
      background-color: black;
    }
20. 20.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      text-align: center;
      font-weight: bold;
      font-style: italic;
    }
21. 21.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) blue (c) white (d) green
22. 22.Which of these is the border? (a) the text or picture (b) the gap to other boxes (c) space inside the border (d) a solid or dotted edge
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: 100px;
      padding: 10px;
      border: 4px solid black;
      margin: 5px;
    }
24. 24.📱 What does a media query check? (a) the battery level (b) the page title (c) the screen width (d) the time of day
25. 25.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 28px;
      }
    } (a) Yes (b) No
26. 26.True or false: body is an element selector. (a) True (b) False
27. 27.✍️ CSS declarations go inside which brackets? (a) < > (b) { } (c) [ ] (d) ( )
28. 28.🌈 Which colour is rgb(0, 0, 255)? (a) white (b) cyan (c) blue (d) black
29. 29.True or false: margin is a solid or dotted edge. (a) False (b) True
30. 30.🖌️ Which CSS property makes letters bigger? (a) color (b) background-color (c) font-size (d) font-weight
31. 31.💪 Which justify-content value puts boxes in the middle? (a) flex-end (b) flex-start (c) space-between (d) center
32. 32.What does font-weight do? (a) sets the letter colour (b) makes letters bigger (c) makes the text bold (d) picks the font style
33. 33.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 110px;
      padding: 5px;
      border: 5px solid black;
      margin: 20px;
    }
34. 34.⚖️ Which selector is the strongest? (a) an id selector (b) an element selector (c) a class selector
35. 35.Which of these does HTML do? (a) counts down a timer (b) checks a quiz answer (c) adds space around boxes (d) puts a picture on a page
36. 36.✍️ What is the selector in this CSS rule?
    #top {
      padding: 8px;
      color: red;
      font-weight: bold;
      font-style: italic;
    } (a) red (b) #top (c) padding (d) li
37. 37.🎯 Which element does the selector .big style? (a) <div class="big"> (b) <div class="red"> (c) <span class="box"> (d) <div id="big">
38. 38.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 14px;
      }
    } (a) Yes (b) No
39. 39.🖌️ Where does the text sit on its line?
    p {
      font-size: 32px;
      background-color: black;
      text-align: right;
      color: white;
    } (a) on the left (b) on the right (c) in the middle
40. 40.🎯 Which element does the selector h1 style? (a) <li class="star"> (b) <div id="hero"> (c) <h2> (d) <h1 class="star">

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