CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 440 · 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: 90px;
     padding: 25px;
     border: 1px solid black;
     margin: 5px;
   }
2. 2.🖌️ What colour are the letters?
   h1 {
     color: yellow;
     background-color: orange;
     text-align: left;
     font-size: 12px;
   } (a) blue (b) orange (c) yellow
3. 3.🧩 Which language adds space around boxes? (a) HTML (b) JavaScript (c) CSS
4. 4.What does justify-content: flex-start do? (a) packs boxes at the start (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the end
5. 5.🎯 What kind of selector is #top? (a) an element selector (b) a class selector (c) an id selector
6. 6.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) exactly 100px (c) turned off (d) 800px or narrower
7. 7.💪 Which flexbox property spaces boxes along a row? (a) justify-content (b) gap (c) flex-direction (d) display: flex
8. 8.✍️ What is the selector in this CSS rule?
   body {
     font-size: 20px;
     font-style: italic;
     border: 2px solid;
     text-align: center;
   } (a) italic (b) body (c) .box (d) font-size
9. 9.🌈 In #00004e the blue part is the hex number 4e. What is it as a normal number?
10. 10.True or false: the border is space outside the border. (a) False (b) True
11. 11.Which of these is the content? (a) the gap to other boxes (b) space outside the border (c) the text or picture (d) a solid or dotted edge
12. 12.What does color do? (a) colours behind the text (b) sets the letter colour (c) picks the font style (d) makes letters bigger
13. 13.✍️ Which sign ends each CSS declaration? (a) , (b) . (c) ; (d) :
14. 14.🌈 Which colour of light is strongest in rgb(6, 203, 34)? (a) red (b) blue (c) green
15. 15.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 160px;
      padding: 15px;
      border: 3px solid black;
      margin: 5px;
    }
16. 16.⚖️ What colour is the text of this element?
    <p class="red" id="end">Hi</p>
    CSS:
    p { color: purple; }
    p { color: yellow; } (a) black (b) yellow (c) white (d) purple
17. 17.⚖️ What colour is the text of this element?
    <h2 class="note" id="logo">Hi</h2>
    CSS:
    .note { color: black; }
    .note { color: blue; } (a) purple (b) white (c) blue (d) black
18. 18.🌈 Which hex code is yellow? (a) #ffff00 (b) #00ff00 (c) #00ffff (d) #0000ff
19. 19.⚖️ What colour is the text of this element?
    <h1 class="star" id="main">Hi</h1>
    CSS:
    #main { color: red; }
    #main { color: blue; } (a) red (b) white (c) blue (d) green
20. 20.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 110px;
      padding: 25px;
      border: 2px solid black;
      margin: 0px;
    }
21. 21.🖌️ How big is the text, in px?
    h2 {
      text-align: center;
      color: purple;
      font-size: 40px;
      background-color: black;
    }
22. 22.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 200px;
      padding: 30px;
      border: 5px solid black;
      margin: 5px;
    }
23. 23.🧩 Which language reacts to a button click? (a) CSS (b) JavaScript (c) HTML
24. 24.🎯 Which CSS selector matches this element?
    <p class="box" id="hero">Hello</p> (a) .star (b) #box (c) .box (d) .hero
25. 25.🎯 What kind of selector is .card? (a) an element selector (b) an id selector (c) a class selector
26. 26.🖌️ How big is the text, in px?
    h1 {
      background-color: white;
      text-align: center;
      font-size: 36px;
      color: blue;
    }
27. 27.True or false: the border is a solid or dotted edge. (a) True (b) False
28. 28.⚖️ What colour is the text of this element?
    <h2 class="box" id="hero">Hi</h2>
    CSS:
    h2 { color: red; }
    h2 { color: black; } (a) red (b) black (c) orange (d) green
29. 29.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 360px;
      justify-content: center;
    }
    Inside are 4 boxes, each 80px wide (no margins).
30. 30.🎯 Which sign starts an id selector? (a) & (b) @ (c) . (d) #
31. 31.📱 Responsive design means a page ___. (a) never changes (b) fits every screen (c) is only for laptops (d) has no pictures
32. 32.🎨 Which tag connects an outside CSS file? (a) <img> (b) <css> (c) <a> (d) <link>
33. 33.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 50px;
      padding: 15px;
      border: 4px solid black;
      margin: 5px;
    }
34. 34.🔍 Which is the odd one out? (a) changes the page live (b) shows a pop-up message (c) makes a form box (d) counts down a timer
35. 35.🎯 Which sign starts a class selector? (a) . (b) & (c) # (d) @
36. 36.True or false: li is a class selector. (a) False (b) True
37. 37.🎯 Which element does the selector h1 style? (a) <div id="intro"> (b) <h1 class="big"> (c) <h2> (d) <li class="big">
38. 38.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
39. 39.⚖️ What colour is the text of this element?
    <p class="note" id="main">Hi</p>
    CSS:
    #main { color: red; }
    p { color: green; }
    .note { color: black; } (a) black (b) yellow (c) red (d) green
40. 40.What does justify-content: space-between do? (a) packs boxes at the end (b) packs boxes at the start (c) puts boxes in the middle (d) equal gaps, none at ends

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