CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 337 · 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 tag connects an outside CSS file? (a) <css> (b) <a> (c) <img> (d) <link>
2. 2.✍️ What is the selector in this CSS rule?
   h1 {
     width: 300px;
     border: 2px solid;
     font-size: 20px;
   } (a) p (b) h1 (c) width (d) 2px solid
3. 3.🎯 Which sign starts an id selector? (a) . (b) & (c) # (d) @
4. 4.📦 In the box model, which part is a solid or dotted edge? (a) padding (b) content (c) border (d) margin
5. 5.🌈 In #510000 the red part is the hex number 51. What is it as a normal number?
6. 6.⚖️ What colour is the text of this element?
   <p class="red" id="hero">Hi</p>
   CSS:
   p { color: yellow; }
   #hero { color: blue; } (a) blue (b) red (c) yellow (d) purple
7. 7.📦 In the box model, which part is space inside the border? (a) border (b) content (c) margin (d) padding
8. 8.🖌️ Where does the text sit on its line?
   li {
     font-size: 12px;
     background-color: blue;
     color: red;
     text-align: center;
   } (a) on the right (b) on the left (c) in the middle
9. 9.📱 The screen is 320px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 28px;
     }
   } (a) Yes (b) No
10. 10.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      font-style: italic;
      padding: 8px;
      font-size: 20px;
      text-align: center;
    }
11. 11.📱 Which tag helps phones show a page at the right size? (a) the viewport meta tag (b) the hr tag (c) the title tag (d) the br tag
12. 12.Which of these does JavaScript do? (a) makes headings and lists (b) puts a picture on a page (c) rounds box corners (d) changes the page live
13. 13.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 50px;
      padding: 10px;
      border: 4px solid black;
      margin: 15px;
    }
14. 14.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) flex-end (c) space-between (d) center
15. 15.⚖️ What colour is the text of this element?
    <h2 class="note" id="top">Hi</h2>
    CSS:
    .note { color: orange; }
    h2 { color: red; } (a) green (b) white (c) red (d) orange
16. 16.True or false: .card is an id selector. (a) False (b) True
17. 17.What does font-family do? (a) colours behind the text (b) centres a heading (c) picks the font style (d) makes the text bold
18. 18.✍️ How does a CSS comment start? (a) <!-- (b) # (c) // (d) /*
19. 19.True or false: padding is the line round the box. (a) False (b) True
20. 20.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 50px;
      padding: 5px;
      border: 5px solid black;
      margin: 0px;
    }
21. 21.What does text-align do? (a) colours behind the text (b) picks the font style (c) sets the letter colour (d) centres a heading
22. 22.True or false: h1 is a class selector. (a) True (b) False
23. 23.✍️ What value is given to font-style in this rule?
    #top {
      margin: 10px;
      color: red;
      font-style: italic;
      background-color: yellow;
    } (a) italic (b) red (c) 20px (d) font-style
24. 24.True or false: HTML checks a quiz answer. (a) True (b) False
25. 25.🌈 In #rrggbb, which colour do the last two digits give? (a) green (b) blue (c) red (d) white
26. 26.⚖️ What colour is the text of this element?
    <h2 class="star" id="end">Hi</h2>
    CSS:
    .star { color: yellow; }
    #end { color: white; } (a) yellow (b) white (c) red (d) orange
27. 27.⚖️ What colour is the text of this element?
    <h2 class="box" id="main">Hi</h2>
    CSS:
    #main { color: green; }
    #main { color: white; } (a) blue (b) red (c) white (d) green
28. 28.🎯 Which element does the selector .star style? (a) <li class="menu"> (b) <li id="star"> (c) <li class="star"> (d) <div class="note">
29. 29.🎯 Which CSS selector matches this element?
    <div class="big" id="main">Hello</div> (a) #main (b) span (c) .red (d) #big
30. 30.🖌️ Where does the text sit on its line?
    p {
      font-size: 40px;
      background-color: black;
      color: yellow;
      text-align: center;
    } (a) on the right (b) in the middle (c) on the left
31. 31.Which of these does CSS do? (a) makes headings and lists (b) counts down a timer (c) adds space around boxes (d) reacts to a button click
32. 32.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 140px;
      padding: 30px;
      border: 3px solid black;
      margin: 20px;
    }
33. 33.🖌️ Where does the text sit on its line?
    h1 {
      background-color: green;
      font-size: 16px;
      color: red;
      text-align: center;
    } (a) on the left (b) in the middle (c) on the right
34. 34.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 190px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 80px wide (no margins).
35. 35.✍️ Which sign ends each CSS declaration? (a) : (b) , (c) . (d) ;
36. 36.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 16px;
      }
    }
37. 37.✍️ What is the selector in this CSS rule?
    .box {
      padding: 8px;
      font-weight: bold;
    } (a) bold (b) padding (c) h2 (d) .box
38. 38.🎨 Which attribute adds CSS inside one tag? (a) style (b) alt (c) src (d) href
39. 39.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 180px;
      justify-content: center;
    }
    Inside are 3 boxes, each 40px wide (no margins).
40. 40.🌈 Which colour of light is strongest in rgb(64, 154, 25)? (a) blue (b) green (c) red

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