CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 814 · 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 of these is the border? (a) space outside the border (b) the gap to other boxes (c) the line round the box (d) the gap round content
2. 2.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 22px;
     }
   }
3. 3.True or false: the content is space inside the border. (a) True (b) False
4. 4.True or false: padding is space inside the border. (a) True (b) False
5. 5.🌈 In #rrggbb, which colour do the last two digits give? (a) blue (b) white (c) green (d) red
6. 6.🎨 Which attribute adds CSS inside one tag? (a) src (b) style (c) href (d) alt
7. 7.True or false: .note is a class selector. (a) True (b) False
8. 8.📦 In the box model, which part is the text or picture? (a) margin (b) content (c) border (d) padding
9. 9.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 200px;
     justify-content: flex-end;
   }
   Inside are 2 boxes, each 60px wide (no margins).
10. 10.🌈 Which hex code is blue? (a) #000000 (b) #00ffff (c) #ff0000 (d) #0000ff
11. 11.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 190px;
      padding: 10px;
      border: 5px solid black;
      margin: 20px;
    }
12. 12.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 14px;
      }
    } (a) No (b) Yes
13. 13.True or false: li is an id selector. (a) True (b) False
14. 14.🌈 Hex digits go 0 to 9, then A to which letter? (a) Z (b) J (c) G (d) F
15. 15.🖌️ Which CSS property colours behind the text? (a) font-size (b) background-color (c) text-align (d) font-weight
16. 16.🎨 A CSS file usually ends with which extension? (a) .png (b) .html (c) .js (d) .css
17. 17.🧩 Which language makes a link? (a) CSS (b) JavaScript (c) HTML
18. 18.True or false: CSS gives the page structure. (a) True (b) False
19. 19.🎯 What kind of selector is .card? (a) an id selector (b) an element selector (c) a class selector
20. 20.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 180px;
      padding: 20px;
      border: 1px solid black;
      margin: 0px;
    }
21. 21.🖌️ What colour is behind the letters?
    li {
      text-align: left;
      color: black;
      font-size: 20px;
      background-color: orange;
    } (a) purple (b) black (c) orange
22. 22.🖌️ How big is the text, in px?
    h2 {
      text-align: center;
      background-color: black;
      color: orange;
      font-size: 12px;
    }
23. 23.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 170px;
      padding: 20px;
      border: 4px solid black;
      margin: 10px;
    }
24. 24.What does font-family do? (a) makes letters bigger (b) picks the font style (c) makes the text bold (d) colours behind the text
25. 25.🧩 Which language makes a form box? (a) JavaScript (b) CSS (c) HTML
26. 26.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 290px;
      padding: 30px;
      border: 5px solid black;
      margin: 15px;
    }
27. 27.📦 In the box model, which part is the line round the box? (a) margin (b) padding (c) border (d) content
28. 28.✍️ What is the selector in this CSS rule?
    .box {
      color: red;
      border: 2px solid;
    } (a) .box (b) color (c) h2 (d) 2px solid
29. 29.🌈 Which colour of light is strongest in rgb(220, 113, 128)? (a) red (b) green (c) blue
30. 30.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 70px;
      padding: 10px;
      border: 5px solid black;
      margin: 0px;
    }
31. 31.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 140px;
      padding: 15px;
      border: 5px solid black;
      margin: 20px;
    }
32. 32.True or false: .big is a class selector. (a) False (b) True
33. 33.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 180px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 80px wide (no margins).
34. 34.📦 In the box model, which part is a solid or dotted edge? (a) content (b) padding (c) margin (d) border
35. 35.✍️ Which sign ends each CSS declaration? (a) , (b) . (c) : (d) ;
36. 36.🎯 Which CSS selector matches this element?
    <h1 class="star" id="hero">Hello</h1> (a) .hero (b) .menu (c) .star (d) #star
37. 37.🌈 Which colour is #ff0000? (a) red (b) cyan (c) blue (d) bright green
38. 38.🌈 Which colour is rgb(255, 255, 255)? (a) yellow (b) bright green (c) blue (d) white
39. 39.⚖️ What colour is the text of this element?
    <p class="star" id="hero">Hi</p>
    CSS:
    p { color: orange; }
    p { color: blue; } (a) blue (b) black (c) yellow (d) orange
40. 40.✍️ Which property is set to red in this rule?
    #top {
      text-align: center;
      font-weight: bold;
      font-style: italic;
      color: red;
    } (a) text-align (b) red (c) color (d) font-size

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