CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 872 · 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 1366px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 14px;
     }
   }
2. 2.🖌️ Where does the text sit on its line?
   p {
     font-size: 32px;
     background-color: purple;
     text-align: left;
     color: green;
   } (a) on the right (b) on the left (c) in the middle
3. 3.🌈 In #3d0000 the red part is the hex number 3d. What is it as a normal number?
4. 4.💪 Which justify-content value equal gaps, none at ends? (a) center (b) flex-end (c) flex-start (d) space-between
5. 5.📱 What does a media query check? (a) the battery level (b) the screen width (c) the page title (d) the time of day
6. 6.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) 600px or narrower (c) turned off (d) exactly 1000px
7. 7.📱 The screen is 320px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 30px;
     }
   } (a) Yes (b) No
8. 8.⚖️ Which selector is the strongest? (a) an element selector (b) a class selector (c) an id selector
9. 9.What does justify-content: flex-end 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
10. 10.🎯 Which CSS selector matches this element?
    <li class="big" id="logo">Hello</li> (a) .big (b) .red (c) div (d) #end
11. 11.🖌️ Where does the text sit on its line?
    li {
      text-align: left;
      color: green;
      font-size: 24px;
      background-color: blue;
    } (a) in the middle (b) on the left (c) on the right
12. 12.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the first one (c) neither (d) the later one
13. 13.Which of these does HTML do? (a) gives the page structure (b) adds space around boxes (c) changes the text size (d) lays out the page
14. 14.True or false: JavaScript changes the text size. (a) False (b) True
15. 15.📱 Which tag helps phones show a page at the right size? (a) the br tag (b) the title tag (c) the hr tag (d) the viewport meta tag
16. 16.💪 Which flexbox property lines boxes up across? (a) justify-content (b) display: flex (c) flex-direction (d) align-items
17. 17.🎯 What kind of selector is .card? (a) a class selector (b) an element selector (c) an id selector
18. 18.🎯 Which element does the selector li style? (a) <div> (b) <li class="note"> (c) <span class="note"> (d) <p id="main">
19. 19.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      background-color: yellow;
    }
20. 20.🧩 Which language puts a picture on a page? (a) CSS (b) JavaScript (c) HTML
21. 21.🎯 Which element does the selector h2 style? (a) <h2 class="big"> (b) <div class="big"> (c) <span id="intro"> (d) <li>
22. 22.Which of these does JavaScript do? (a) changes the text size (b) gives the page structure (c) lays out the page (d) checks a quiz answer
23. 23.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 110px;
      padding: 10px;
      border: 1px solid black;
      margin: 10px;
    }
24. 24.True or false: JavaScript lays out the page. (a) False (b) True
25. 25.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 250px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 50px wide (no margins).
26. 26.🌈 Which colour of light is strongest in rgb(228, 18, 26)? (a) blue (b) green (c) red
27. 27.⚖️ What colour is the text of this element?
    <h2 class="menu" id="top">Hi</h2>
    CSS:
    h2 { color: orange; }
    #top { color: yellow; } (a) orange (b) yellow (c) green (d) purple
28. 28.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 12px;
      }
    }
29. 29.🔍 Which is the odd one out? (a) sets colours and fonts (b) lays out the page (c) changes the text size (d) changes the page live
30. 30.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 280px;
      padding: 20px;
      border: 1px solid black;
      margin: 10px;
    }
31. 31.🧩 Which language makes headings and lists? (a) HTML (b) JavaScript (c) CSS
32. 32.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 22px;
      }
    }
33. 33.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    }
34. 34.⚖️ What colour is the text of this element?
    <h1 class="big" id="hero">Hi</h1>
    CSS:
    h1 { color: white; }
    h1 { color: purple; } (a) green (b) white (c) purple (d) blue
35. 35.🖌️ Which CSS property colours behind the text? (a) text-align (b) background-color (c) font-weight (d) color
36. 36.✍️ How does a CSS comment start? (a) // (b) <!-- (c) # (d) /*
37. 37.What does justify-content: center do? (a) packs boxes at the end (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the start
38. 38.🖌️ What colour are the letters?
    h2 {
      background-color: green;
      color: red;
      text-align: right;
      font-size: 12px;
    } (a) black (b) green (c) red
39. 39.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 22px;
      }
    } (a) Yes (b) No
40. 40.🖌️ Where does the text sit on its line?
    h2 {
      font-size: 40px;
      color: black;
      background-color: red;
      text-align: left;
    } (a) on the right (b) in the middle (c) on the left

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