CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 890 · 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.🖌️ What colour are the letters?
   p {
     color: orange;
     background-color: black;
     font-size: 36px;
     text-align: right;
   } (a) green (b) black (c) orange
2. 2.🎯 Which element does the selector li style? (a) <li class="menu"> (b) <div> (c) <span class="menu"> (d) <p id="intro">
3. 3.🌈 Which hex code is cyan? (a) #000000 (b) #00ff00 (c) #00ffff (d) #ffffff
4. 4.📱 The screen is 1100px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 16px;
     }
   } (a) Yes (b) No
5. 5.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 230px;
     padding: 25px;
     border: 1px solid black;
     margin: 10px;
   }
6. 6.⚖️ What colour is the text of this element?
   <p class="big" id="top">Hi</p>
   CSS:
   .big { color: black; }
   #top { color: orange; }
   p { color: red; } (a) red (b) purple (c) orange (d) black
7. 7.⚖️ What colour is the text of this element?
   <p class="red" id="top">Hi</p>
   CSS:
   .red { color: green; }
   .red { color: blue; } (a) green (b) yellow (c) blue (d) orange
8. 8.🖌️ How big is the text, in px?
   p {
     background-color: orange;
     font-size: 36px;
     text-align: left;
     color: green;
   }
9. 9.What does justify-content: space-between do? (a) puts boxes in the middle (b) packs boxes at the start (c) packs boxes at the end (d) equal gaps, none at ends
10. 10.✍️ Which sign ends each CSS declaration? (a) , (b) : (c) . (d) ;
11. 11.🖌️ Which CSS property makes the text bold? (a) text-align (b) font-size (c) color (d) font-weight
12. 12.What does justify-content: center do? (a) packs boxes at the start (b) puts boxes in the middle (c) equal gaps, none at ends (d) packs boxes at the end
13. 13.🎨 Which tag connects an outside CSS file? (a) <css> (b) <link> (c) <a> (d) <img>
14. 14.🎯 Which element does the selector .big style? (a) <p id="big"> (b) <p class="big"> (c) <p class="red"> (d) <h1 class="box">
15. 15.📦 In the box model, which part is space inside the border? (a) content (b) border (c) padding (d) margin
16. 16.⚖️ What colour is the text of this element?
    <p class="note" id="main">Hi</p>
    CSS:
    #main { color: black; }
    p { color: orange; }
    .note { color: purple; } (a) black (b) red (c) purple (d) orange
17. 17.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      font-size: 20px;
      margin: 10px;
      border: 2px solid;
      color: red;
    }
18. 18.💪 Which justify-content value packs boxes at the end? (a) space-between (b) center (c) flex-start (d) flex-end
19. 19.🖌️ Which CSS property colours behind the text? (a) color (b) font-size (c) font-family (d) background-color
20. 20.What does text-align do? (a) centres a heading (b) makes the text bold (c) picks the font style (d) sets the letter colour
21. 21.True or false: padding is space inside the border. (a) False (b) True
22. 22.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 340px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 80px wide (no margins).
23. 23.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 40px wide (no margins).
24. 24.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 250px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 50px wide (no margins).
25. 25.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 30px;
      }
    } (a) Yes (b) No
26. 26.🎯 Which element does the selector #intro style? (a) <div class="box"> (b) <li id="main"> (c) <li class="intro"> (d) <li id="intro">
27. 27.✍️ What is the selector in this CSS rule?
    h1 {
      padding: 8px;
      font-size: 20px;
      width: 300px;
    } (a) h1 (b) p (c) padding (d) 20px
28. 28.🌈 In #rrggbb, which colour do the last two digits give? (a) green (b) red (c) white (d) blue
29. 29.Which of these does HTML do? (a) changes the text size (b) puts a picture on a page (c) shows a pop-up message (d) adds space around boxes
30. 30.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 32px;
      }
    } (a) Yes (b) No
31. 31.🌈 Which colour of light is strongest in rgb(46, 116, 152)? (a) red (b) green (c) blue
32. 32.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 24px;
      }
    }
33. 33.✍️ CSS declarations go inside which brackets? (a) ( ) (b) [ ] (c) < > (d) { }
34. 34.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 22px;
      }
    } (a) Yes (b) No
35. 35.True or false: the border is the line round the box. (a) True (b) False
36. 36.⚖️ What colour is the text of this element?
    <p class="box" id="hero">Hi</p>
    CSS:
    .box { color: orange; }
    .box { color: green; } (a) black (b) blue (c) orange (d) green
37. 37.What does color do? (a) makes the text bold (b) sets the letter colour (c) picks the font style (d) makes letters bigger
38. 38.🌈 Which colour is #00ffff? (a) magenta (b) yellow (c) cyan (d) black
39. 39.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 24px;
      }
    }
40. 40.⚖️ What colour is the text of this element?
    <h1 class="box" id="logo">Hi</h1>
    CSS:
    h1 { color: purple; }
    h1 { color: red; } (a) purple (b) orange (c) red (d) green

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