CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 169 · 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 is the text of this element?
   <h2 class="box" id="end">Hi</h2>
   CSS:
   .box { color: black; }
   h2 { color: yellow; }
   #end { color: purple; } (a) black (b) yellow (c) orange (d) purple
2. 2.✍️ What is the selector in this CSS rule?
   h2 {
     font-weight: bold;
     color: red;
   } (a) red (b) font-weight (c) h1 (d) h2
3. 3.⚖️ What colour is the text of this element?
   <p class="menu" id="intro">Hi</p>
   CSS:
   p { color: white; }
   p { color: black; } (a) yellow (b) white (c) purple (d) black
4. 4.🌈 Which colour is rgb(255, 255, 0)? (a) black (b) yellow (c) white (d) cyan
5. 5.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 140px;
     padding: 15px;
     border: 2px solid black;
     margin: 5px;
   }
6. 6.✍️ How many declarations (property: value pairs) are in this rule?
   h1 {
     margin: 10px;
     width: 300px;
   }
7. 7.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 140px;
     justify-content: center;
   }
   Inside are 3 boxes, each 40px wide (no margins).
8. 8.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 20px;
     }
   }
9. 9.🖌️ What colour are the letters?
   p {
     font-size: 36px;
     text-align: center;
     background-color: orange;
     color: purple;
   } (a) purple (b) orange (c) yellow
10. 10.⚖️ What colour is the text of this element?
    <h1 class="menu" id="intro">Hi</h1>
    CSS:
    h1 { color: purple; }
    h1 { color: white; } (a) green (b) white (c) red (d) purple
11. 11.True or false: .note is a class selector. (a) True (b) False
12. 12.🌈 Which colour is #ffff00? (a) bright green (b) white (c) black (d) yellow
13. 13.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 6px;
      }
    }
14. 14.True or false: CSS changes the text size. (a) True (b) False
15. 15.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 170px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 50px wide (no margins).
16. 16.🌈 Which colour of light is strongest in rgb(96, 234, 34)? (a) red (b) green (c) blue
17. 17.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 170px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 80px wide (no margins).
18. 18.🖌️ What colour is behind the letters?
    p {
      color: purple;
      background-color: black;
      font-size: 16px;
      text-align: left;
    } (a) purple (b) blue (c) black
19. 19.🌈 Which colour is #ff00ff? (a) bright green (b) cyan (c) black (d) magenta
20. 20.✍️ In color: blue; which part is the value? (a) : (b) blue (c) color (d) ;
21. 21.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 130px;
      padding: 25px;
      border: 2px solid black;
      margin: 0px;
    }
22. 22.✍️ Which property is set to center in this rule?
    p {
      width: 300px;
      margin: 10px;
      text-align: center;
    } (a) margin (b) center (c) text-align (d) background-color
23. 23.🎨 Which tag connects an outside CSS file? (a) <css> (b) <a> (c) <img> (d) <link>
24. 24.Which of these does CSS do? (a) puts a picture on a page (b) rounds box corners (c) makes a form box (d) makes a link
25. 25.Which of these does JavaScript do? (a) makes headings and lists (b) gives the page structure (c) lays out the page (d) shows a pop-up message
26. 26.🎨 A CSS file usually ends with which extension? (a) .js (b) .png (c) .css (d) .html
27. 27.🌈 Which hex code is yellow? (a) #00ff00 (b) #ff0000 (c) #ffff00 (d) #0000ff
28. 28.✍️ What value is given to border in this rule?
    h2 {
      border: 2px solid;
      margin: 10px;
    } (a) 2px solid (b) border (c) italic (d) 300px
29. 29.True or false: CSS puts a picture on a page. (a) False (b) True
30. 30.✍️ CSS declarations go inside which brackets? (a) { } (b) ( ) (c) [ ] (d) < >
31. 31.🎯 Which element does the selector #main style? (a) <h1 id="logo"> (b) <h1 id="main"> (c) <h2 class="red"> (d) <h1 class="main">
32. 32.🌈 In #0000d3 the blue part is the hex number d3. What is it as a normal number?
33. 33.Which of these is padding? (a) the line round the box (b) space inside the border (c) the text or picture (d) space outside the border
34. 34.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
35. 35.True or false: #top is an element selector. (a) False (b) True
36. 36.Which of these does HTML do? (a) changes the page live (b) rounds box corners (c) gives the page structure (d) counts down a timer
37. 37.🔍 Which is the odd one out? (a) changes the page live (b) reacts to a button click (c) gives the page structure (d) shows a pop-up message
38. 38.🧩 Which language checks a quiz answer? (a) HTML (b) CSS (c) JavaScript
39. 39.🖌️ What colour is behind the letters?
    h1 {
      font-size: 12px;
      text-align: center;
      color: yellow;
      background-color: blue;
    } (a) blue (b) yellow (c) orange
40. 40.🎯 Which element does the selector #intro style? (a) <h2 class="red"> (b) <h1 id="main"> (c) <h1 class="intro"> (d) <h1 id="intro">

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