CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 448 · 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: 150px;
     padding: 25px;
     border: 1px solid black;
     margin: 20px;
   }
2. 2.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 140px;
     justify-content: flex-end;
   }
   Inside are 2 boxes, each 40px wide (no margins).
3. 3.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (min-width: 600px) {
     p {
       font-size: 16px;
     }
   }
4. 4.📱 Responsive design means a page ___. (a) is only for laptops (b) never changes (c) has no pictures (d) fits every screen
5. 5.✍️ How many declarations (property: value pairs) are in this rule?
   h1 {
     padding: 8px;
   }
6. 6.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 80px;
     padding: 15px;
     border: 1px solid black;
     margin: 0px;
   }
7. 7.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 190px;
     justify-content: flex-start;
   }
   Inside are 3 boxes, each 40px wide (no margins).
8. 8.True or false: HTML makes a form box. (a) False (b) True
9. 9.✍️ What is the selector in this CSS rule?
   body {
     width: 300px;
     font-size: 20px;
   } (a) .box (b) 20px (c) body (d) width
10. 10.⚖️ What colour is the text of this element?
    <h1 class="big" id="hero">Hi</h1>
    CSS:
    #hero { color: white; }
    h1 { color: green; }
    .big { color: purple; } (a) purple (b) white (c) yellow (d) green
11. 11.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the first one (c) the later one (d) neither
12. 12.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 32px;
      }
    } (a) No (b) Yes
13. 13.⚖️ What colour is the text of this element?
    <h1 class="menu" id="end">Hi</h1>
    CSS:
    h1 { color: black; }
    h1 { color: blue; } (a) blue (b) black (c) purple (d) white
14. 14.True or false: HTML makes headings and lists. (a) True (b) False
15. 15.🖌️ Which CSS property colours behind the text? (a) font-family (b) background-color (c) color (d) font-size
16. 16.Which of these does CSS do? (a) gives the page structure (b) counts down a timer (c) checks a quiz answer (d) sets colours and fonts
17. 17.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    } (a) Yes (b) No
18. 18.✍️ Which property is set to 20px in this rule?
    li {
      font-size: 20px;
      color: red;
    } (a) text-align (b) background-color (c) font-size (d) 20px
19. 19.True or false: img is a class selector. (a) True (b) False
20. 20.⚖️ What colour is the text of this element?
    <h2 class="note" id="hero">Hi</h2>
    CSS:
    #hero { color: black; }
    .note { color: yellow; } (a) yellow (b) green (c) black (d) red
21. 21.🖌️ What colour are the letters?
    h2 {
      text-align: left;
      background-color: white;
      font-size: 24px;
      color: yellow;
    } (a) white (b) yellow (c) red
22. 22.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 360px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 80px wide (no margins).
23. 23.✍️ What value is given to text-align in this rule?
    p {
      border: 2px solid;
      color: red;
      text-align: center;
      font-size: 20px;
    } (a) yellow (b) 10px (c) center (d) text-align
24. 24.🎯 Which CSS selector matches this element?
    <p class="menu" id="intro">Hello</p> (a) .intro (b) .note (c) .menu (d) #menu
25. 25.True or false: CSS gives the page structure. (a) True (b) False
26. 26.⚖️ What colour is the text of this element?
    <p class="star" id="main">Hi</p>
    CSS:
    .star { color: green; }
    .star { color: orange; } (a) green (b) purple (c) orange (d) red
27. 27.🎯 Which element does the selector span style? (a) <h1 class="menu"> (b) <h2 id="intro"> (c) <span class="menu"> (d) <p>
28. 28.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) exactly 100px (c) 800px or wider (d) turned off
29. 29.🎯 Which CSS selector matches this element?
    <p class="menu" id="hero">Hello</p> (a) #menu (b) #top (c) p (d) .note
30. 30.⚖️ What colour is the text of this element?
    <h1 class="box" id="intro">Hi</h1>
    CSS:
    h1 { color: blue; }
    h1 { color: black; } (a) blue (b) green (c) black (d) yellow
31. 31.✍️ Which property is set to 2px solid in this rule?
    .note {
      font-style: italic;
      border: 2px solid;
    } (a) width (b) font-style (c) border (d) 2px solid
32. 32.🎯 Which element does the selector h2 style? (a) <li> (b) <span id="logo"> (c) <h2 class="menu"> (d) <div class="menu">
33. 33.🎯 What kind of selector is .star? (a) an element selector (b) an id selector (c) a class selector
34. 34.🎯 Which CSS selector matches this element?
    <h2 class="red" id="logo">Hello</h2> (a) #logo (b) li (c) #end (d) .box
35. 35.🎨 A CSS file usually ends with which extension? (a) .js (b) .png (c) .css (d) .html
36. 36.✍️ In color: blue; which part is the property? (a) blue (b) color (c) : (d) ;
37. 37.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 190px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 40px wide (no margins).
38. 38.💪 Which justify-content value puts boxes in the middle? (a) flex-end (b) space-between (c) center (d) flex-start
39. 39.🌈 Which colour of light is strongest in rgb(105, 101, 229)? (a) red (b) green (c) blue
40. 40.Which of these does JavaScript do? (a) sets colours and fonts (b) gives the page structure (c) reacts to a button click (d) makes headings and lists

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