CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 586 · 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.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 220px;
     padding: 20px;
     border: 3px solid black;
     margin: 5px;
   }
2. 2.⚖️ What colour is the text of this element?
   <p class="box" id="main">Hi</p>
   CSS:
   #main { color: purple; }
   #main { color: yellow; } (a) red (b) yellow (c) green (d) purple
3. 3.What does color do? (a) colours behind the text (b) makes letters bigger (c) makes the text bold (d) sets the letter colour
4. 4.⚖️ What colour is the text of this element?
   <p class="box" id="top">Hi</p>
   CSS:
   #top { color: purple; }
   #top { color: orange; } (a) yellow (b) blue (c) purple (d) orange
5. 5.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 200px;
     justify-content: flex-start;
   }
   Inside are 2 boxes, each 80px wide (no margins).
6. 6.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 200px;
     padding: 25px;
     border: 1px solid black;
     margin: 15px;
   }
7. 7.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) turned off (c) 600px or narrower (d) exactly 1000px
8. 8.What does background-color do? (a) makes the text bold (b) colours behind the text (c) centres a heading (d) sets the letter colour
9. 9.🎨 Which attribute adds CSS inside one tag? (a) href (b) alt (c) src (d) style
10. 10.💪 Which justify-content value puts boxes in the middle? (a) flex-start (b) flex-end (c) center (d) space-between
11. 11.✍️ What is the selector in this CSS rule?
    .note {
      text-align: center;
      color: red;
      padding: 8px;
      font-style: italic;
    } (a) red (b) #top (c) text-align (d) .note
12. 12.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    }
13. 13.🧩 Which language lays out the page? (a) JavaScript (b) HTML (c) CSS
14. 14.🎨 A CSS file usually ends with which extension? (a) .png (b) .html (c) .js (d) .css
15. 15.🌈 In #c50000 the red part is the hex number c5. What is it as a normal number?
16. 16.🌈 In #007a00 the green part is the hex number 7a. What is it as a normal number?
17. 17.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 260px;
      padding: 20px;
      border: 5px solid black;
      margin: 5px;
    }
18. 18.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 120px;
      padding: 30px;
      border: 1px solid black;
      margin: 0px;
    }
19. 19.🎯 What kind of selector is #end? (a) a class selector (b) an id selector (c) an element selector
20. 20.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 22px;
      }
    }
21. 21.✍️ What value is given to text-align in this rule?
    p {
      padding: 8px;
      text-align: center;
      margin: 10px;
      border: 2px solid;
    } (a) center (b) 10px (c) yellow (d) text-align
22. 22.Which of these is padding? (a) the text or picture (b) the gap to other boxes (c) space inside the border (d) the line round the box
23. 23.🖌️ Which CSS property picks the font style? (a) font-family (b) text-align (c) font-size (d) font-weight
24. 24.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) neither (c) the shorter one (d) the later one
25. 25.✍️ What is the selector in this CSS rule?
    body {
      font-size: 20px;
      font-style: italic;
      text-align: center;
      color: red;
    } (a) font-size (b) italic (c) .box (d) body
26. 26.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 16px;
      }
    } (a) No (b) Yes
27. 27.🌈 Which colour is #0000ff? (a) bright green (b) red (c) blue (d) cyan
28. 28.True or false: CSS makes headings and lists. (a) False (b) True
29. 29.🎯 Can many elements share the same class? (a) No (b) Yes
30. 30.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 20px;
      }
    }
31. 31.✍️ What value is given to background-color in this rule?
    li {
      background-color: yellow;
      font-weight: bold;
      width: 300px;
    } (a) yellow (b) 10px (c) 8px (d) background-color
32. 32.🖌️ What colour is behind the letters?
    h1 {
      font-size: 16px;
      text-align: center;
      color: white;
      background-color: yellow;
    } (a) black (b) yellow (c) white
33. 33.🌈 Which colour is #ff00ff? (a) magenta (b) white (c) black (d) cyan
34. 34.🖌️ Which CSS property centres a heading? (a) text-align (b) font-size (c) font-weight (d) background-color
35. 35.✍️ What is the selector in this CSS rule?
    li {
      background-color: yellow;
      font-style: italic;
    } (a) background-color (b) italic (c) li (d) body
36. 36.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 22px;
      }
    }
37. 37.🌈 Hex digits go 0 to 9, then A to which letter? (a) Z (b) G (c) J (d) F
38. 38.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 6px;
      }
    } (a) No (b) Yes
39. 39.📦 In the box model, which part is a solid or dotted edge? (a) margin (b) border (c) content (d) padding
40. 40.💪 Which flexbox property sets space between boxes? (a) justify-content (b) gap (c) flex-direction (d) display: flex

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