CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 633 · 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 much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 60px;
     padding: 20px;
     border: 2px solid black;
     margin: 15px;
   }
2. 2.🌈 In #002b00 the green part is the hex number 2b. What is it as a normal number?
3. 3.🎨 A CSS file usually ends with which extension? (a) .js (b) .html (c) .png (d) .css
4. 4.✍️ How many declarations (property: value pairs) are in this rule?
   .box {
     font-style: italic;
     font-size: 20px;
     text-align: center;
     background-color: yellow;
   }
5. 5.True or false: margin is the gap round content. (a) True (b) False
6. 6.✍️ What value is given to color in this rule?
   #top {
     color: red;
     font-weight: bold;
     font-size: 20px;
     font-style: italic;
   } (a) 20px (b) center (c) red (d) color
7. 7.💪 Which flexbox property picks row or column? (a) flex-direction (b) align-items (c) gap (d) display: flex
8. 8.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) turned off (c) 800px or narrower (d) exactly 100px
9. 9.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 6px;
     }
   }
10. 10.🌈 Which colour is #0000ff? (a) magenta (b) white (c) bright green (d) blue
11. 11.📱 What does a media query check? (a) the page title (b) the time of day (c) the screen width (d) the battery level
12. 12.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) the first one (c) neither (d) the shorter one
13. 13.🎯 Which CSS selector matches this element?
    <div class="menu" id="top">Hello</div> (a) #intro (b) .menu (c) .top (d) .note
14. 14.✍️ CSS declarations go inside which brackets? (a) [ ] (b) < > (c) ( ) (d) { }
15. 15.🌈 Which colour of light is strongest in rgb(80, 87, 203)? (a) green (b) red (c) blue
16. 16.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 50px;
      padding: 20px;
      border: 5px solid black;
      margin: 20px;
    }
17. 17.🎨 Which attribute adds CSS inside one tag? (a) href (b) src (c) style (d) alt
18. 18.True or false: margin is the gap to other boxes. (a) False (b) True
19. 19.Which of these is the content? (a) space inside the border (b) the line round the box (c) space outside the border (d) the text or picture
20. 20.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    } (a) Yes (b) No
21. 21.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      text-align: center;
      border: 2px solid;
      font-size: 20px;
      background-color: yellow;
    }
22. 22.🖌️ What colour are the letters?
    p {
      font-size: 24px;
      background-color: white;
      color: green;
      text-align: left;
    } (a) white (b) green (c) yellow
23. 23.🖌️ What colour are the letters?
    h2 {
      font-size: 36px;
      background-color: green;
      color: white;
      text-align: right;
    } (a) red (b) green (c) white
24. 24.✍️ Which sign ends each CSS declaration? (a) . (b) ; (c) : (d) ,
25. 25.🎯 What kind of selector is #main? (a) an element selector (b) a class selector (c) an id selector
26. 26.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 230px;
      padding: 10px;
      border: 1px solid black;
      margin: 10px;
    }
27. 27.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 170px;
      padding: 30px;
      border: 2px solid black;
      margin: 20px;
    }
28. 28.True or false: JavaScript reacts to a button click. (a) False (b) True
29. 29.💪 Which justify-content value puts boxes in the middle? (a) center (b) space-between (c) flex-start (d) flex-end
30. 30.⚖️ What colour is the text of this element?
    <p class="big" id="hero">Hi</p>
    CSS:
    p { color: purple; }
    #hero { color: red; }
    .big { color: blue; } (a) purple (b) red (c) blue (d) orange
31. 31.⚖️ What colour is the text of this element?
    <h1 class="box" id="top">Hi</h1>
    CSS:
    h1 { color: black; }
    h1 { color: red; } (a) blue (b) purple (c) black (d) red
32. 32.🧩 Which language reacts to a button click? (a) CSS (b) HTML (c) JavaScript
33. 33.🎯 What kind of selector is li? (a) a class selector (b) an element selector (c) an id selector
34. 34.🌈 Which colour of light is strongest in rgb(74, 5, 177)? (a) blue (b) green (c) red
35. 35.⚖️ What colour is the text of this element?
    <p class="menu" id="top">Hi</p>
    CSS:
    p { color: orange; }
    p { color: blue; } (a) blue (b) yellow (c) orange (d) red
36. 36.🌈 Which colour of light is strongest in rgb(129, 131, 199)? (a) red (b) blue (c) green
37. 37.✍️ Which property is set to center in this rule?
    #top {
      font-style: italic;
      text-align: center;
    } (a) background-color (b) margin (c) center (d) text-align
38. 38.🌈 Which colour is rgb(255, 0, 0)? (a) red (b) blue (c) yellow (d) bright green
39. 39.🎯 How many elements on a page should have the same id? (a) 2 (b) 5 (c) any number (d) 1
40. 40.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 18px;
      }
    }

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