CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 678 · 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 colour is rgb(0, 255, 0)? (a) red (b) bright green (c) white (d) yellow
2. 2.Which of these does JavaScript do? (a) makes headings and lists (b) puts a picture on a page (c) makes a link (d) shows a pop-up message
3. 3.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 480px;
     justify-content: center;
   }
   Inside are 4 boxes, each 100px wide (no margins).
4. 4.🖌️ Which CSS property sets the letter colour? (a) font-weight (b) color (c) font-family (d) background-color
5. 5.📱 The screen is 700px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 16px;
     }
   } (a) Yes (b) No
6. 6.🎯 What kind of selector is body? (a) a class selector (b) an id selector (c) an element selector
7. 7.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 22px;
     }
   }
8. 8.✍️ How many declarations (property: value pairs) are in this rule?
   .note {
     font-weight: bold;
     border: 2px solid;
     background-color: yellow;
   }
9. 9.📱 The screen is 375px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (min-width: 600px) {
     p {
       font-size: 30px;
     }
   } (a) No (b) Yes
10. 10.True or false: CSS shows a pop-up message. (a) False (b) True
11. 11.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    }
12. 12.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 230px;
      padding: 10px;
      border: 3px solid black;
      margin: 0px;
    }
13. 13.✍️ What is the selector in this CSS rule?
    #top {
      font-weight: bold;
      margin: 10px;
    } (a) #top (b) 10px (c) li (d) font-weight
14. 14.✍️ Which property is set to italic in this rule?
    .note {
      font-size: 20px;
      font-style: italic;
    } (a) font-style (b) color (c) font-size (d) italic
15. 15.🌈 In #00001e the blue part is the hex number 1e. What is it as a normal number?
16. 16.📦 In the box model, which part is space inside the border? (a) border (b) margin (c) padding (d) content
17. 17.🌈 Which colour of light is strongest in rgb(43, 2, 208)? (a) green (b) red (c) blue
18. 18.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 420px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 100px wide (no margins).
19. 19.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      width: 300px;
      font-size: 20px;
      background-color: yellow;
    }
20. 20.True or false: li is an id selector. (a) False (b) True
21. 21.🎯 Which CSS selector matches this element?
    <span class="note" id="main">Hello</span> (a) .note (b) p (c) #logo (d) #note
22. 22.🖌️ Which CSS property picks the font style? (a) text-align (b) font-size (c) font-family (d) color
23. 23.📱 Responsive design means a page ___. (a) fits every screen (b) never changes (c) is only for laptops (d) has no pictures
24. 24.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 8px;
      }
    }
25. 25.🎨 Which tag holds CSS inside the head? (a) <style> (b) <body> (c) <script> (d) <css>
26. 26.Which of these does HTML do? (a) shows a pop-up message (b) makes a link (c) changes the page live (d) counts down a timer
27. 27.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
28. 28.🌈 Which colour is #000000? (a) black (b) cyan (c) yellow (d) magenta
29. 29.💪 Which justify-content value packs boxes at the start? (a) flex-start (b) center (c) flex-end (d) space-between
30. 30.🧩 Which language puts a picture on a page? (a) HTML (b) JavaScript (c) CSS
31. 31.🌈 Which colour is rgb(0, 255, 255)? (a) red (b) black (c) cyan (d) bright green
32. 32.🖌️ How big is the text, in px?
    p {
      background-color: black;
      text-align: left;
      font-size: 24px;
      color: red;
    }
33. 33.🖌️ What colour is behind the letters?
    h1 {
      background-color: orange;
      font-size: 28px;
      color: blue;
      text-align: center;
    } (a) blue (b) purple (c) orange
34. 34.🧩 Which language gives the page structure? (a) CSS (b) HTML (c) JavaScript
35. 35.🌈 In #006300 the green part is the hex number 63. What is it as a normal number?
36. 36.Which of these is the border? (a) the line round the box (b) the gap round content (c) space inside the border (d) the text or picture
37. 37.🎯 What kind of selector is img? (a) a class selector (b) an element selector (c) an id selector
38. 38.⚖️ What colour is the text of this element?
    <p class="menu" id="top">Hi</p>
    CSS:
    .menu { color: green; }
    p { color: orange; }
    #top { color: blue; } (a) purple (b) green (c) blue (d) orange
39. 39.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 20px;
      }
    } (a) No (b) Yes
40. 40.🌈 Which hex code is bright green? (a) #00ff00 (b) #ffffff (c) #0000ff (d) #ff00ff

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