CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 797 · 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?
   li {
     font-size: 24px;
     background-color: black;
     text-align: center;
     color: white;
   } (a) black (b) white (c) blue
2. 2.🌈 Which colour is rgb(255, 0, 0)? (a) red (b) bright green (c) white (d) blue
3. 3.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 130px;
     justify-content: space-between;
   }
   Inside are 2 boxes, each 50px wide (no margins).
4. 4.📱 Responsive design means a page ___. (a) is only for laptops (b) has no pictures (c) fits every screen (d) never changes
5. 5.True or false: the border is a solid or dotted edge. (a) False (b) True
6. 6.📦 In the box model, which part is the gap to other boxes? (a) padding (b) border (c) margin (d) content
7. 7.✍️ What value is given to font-style in this rule?
   .note {
     text-align: center;
     border: 2px solid;
     font-style: italic;
   } (a) red (b) font-style (c) italic (d) 20px
8. 8.🖌️ Which CSS property picks the font style? (a) background-color (b) font-size (c) text-align (d) font-family
9. 9.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 2 (b) 3 (c) 6 (d) 4
10. 10.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) 600px or wider (c) turned off (d) 600px or narrower
11. 11.💪 Which justify-content value puts boxes in the middle? (a) flex-end (b) flex-start (c) space-between (d) center
12. 12.🌈 In #rrggbb, which colour do the first two digits give? (a) black (b) green (c) red (d) blue
13. 13.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 170px;
      padding: 5px;
      border: 3px solid black;
      margin: 20px;
    }
14. 14.True or false: padding is the gap to other boxes. (a) False (b) True
15. 15.⚖️ What colour is the text of this element?
    <h2 class="note" id="logo">Hi</h2>
    CSS:
    .note { color: purple; }
    h2 { color: white; } (a) purple (b) red (c) white (d) blue
16. 16.True or false: padding is space inside the border. (a) True (b) False
17. 17.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 340px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 80px wide (no margins).
18. 18.Which of these is the content? (a) the line round the box (b) space inside the border (c) the text or picture (d) the gap round content
19. 19.🖌️ How big is the text, in px?
    h1 {
      color: orange;
      text-align: left;
      font-size: 12px;
      background-color: black;
    }
20. 20.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
21. 21.🖌️ How big is the text, in px?
    h2 {
      background-color: purple;
      text-align: center;
      font-size: 40px;
      color: green;
    }
22. 22.💪 Which flexbox property picks row or column? (a) align-items (b) display: flex (c) flex-direction (d) justify-content
23. 23.🧩 Which language rounds box corners? (a) JavaScript (b) CSS (c) HTML
24. 24.✍️ In color: blue; which part is the property? (a) ; (b) blue (c) : (d) color
25. 25.✍️ What is the selector in this CSS rule?
    p {
      padding: 8px;
      width: 300px;
    } (a) padding (b) 300px (c) .note (d) p
26. 26.🌈 Which colour is rgb(0, 0, 255)? (a) yellow (b) red (c) bright green (d) blue
27. 27.Which of these does HTML do? (a) checks a quiz answer (b) changes the page live (c) makes a link (d) changes the text size
28. 28.✍️ In color: blue; which part is the value? (a) : (b) color (c) ; (d) blue
29. 29.🎨 Which tag connects an outside CSS file? (a) <css> (b) <link> (c) <img> (d) <a>
30. 30.🔍 Which is the odd one out? (a) counts down a timer (b) shows a pop-up message (c) makes headings and lists (d) checks a quiz answer
31. 31.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 99 (c) 1000 (d) 255
32. 32.True or false: JavaScript changes the page live. (a) True (b) False
33. 33.📦 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: 2px solid black;
      margin: 15px;
    }
34. 34.💪 Which flexbox property turns on flexbox? (a) gap (b) display: flex (c) justify-content (d) align-items
35. 35.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 110px;
      padding: 15px;
      border: 4px solid black;
      margin: 10px;
    }
36. 36.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 190px;
      padding: 15px;
      border: 4px solid black;
      margin: 10px;
    }
37. 37.✍️ How does a CSS comment start? (a) // (b) # (c) <!-- (d) /*
38. 38.🖌️ Which CSS property centres a heading? (a) font-weight (b) font-size (c) text-align (d) color
39. 39.✍️ Which sign goes between a property and its value? (a) = (b) : (c) ; (d) -
40. 40.📦 In the box model, which part is the line round the box? (a) border (b) margin (c) padding (d) content

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