CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 129 · 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: 130px;
     padding: 5px;
     border: 3px solid black;
     margin: 5px;
   }
2. 2.💪 Which flexbox property lines boxes up across? (a) align-items (b) gap (c) flex-direction (d) justify-content
3. 3.🎨 Which tag holds CSS inside the head? (a) <body> (b) <script> (c) <style> (d) <css>
4. 4.True or false: padding is space inside the border. (a) False (b) True
5. 5.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 8px;
     }
   }
6. 6.💪 Which justify-content value puts boxes in the middle? (a) flex-end (b) space-between (c) flex-start (d) center
7. 7.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 26px;
     }
   }
8. 8.📦 In the box model, which part is space outside the border? (a) padding (b) margin (c) content (d) border
9. 9.🎯 Which element does the selector li style? (a) <p id="end"> (b) <div> (c) <li class="box"> (d) <span class="box">
10. 10.What does font-size do? (a) picks the font style (b) makes letters bigger (c) centres a heading (d) makes the text bold
11. 11.What does text-align do? (a) centres a heading (b) colours behind the text (c) picks the font style (d) makes the text bold
12. 12.🔍 Which is the odd one out? (a) sets colours and fonts (b) lays out the page (c) changes the text size (d) gives the page structure
13. 13.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      margin: 10px;
      font-weight: bold;
      color: red;
    }
14. 14.🌈 Which colour is #ff0000? (a) black (b) yellow (c) bright green (d) red
15. 15.🎯 What kind of selector is .card? (a) an id selector (b) an element selector (c) a class selector
16. 16.🌈 Which colour of light is strongest in rgb(44, 61, 202)? (a) red (b) blue (c) green
17. 17.🎯 Which CSS selector matches this element?
    <p class="star" id="main">Hello</p> (a) #main (b) #logo (c) #star (d) .main
18. 18.⚖️ What colour is the text of this element?
    <h1 class="big" id="hero">Hi</h1>
    CSS:
    h1 { color: orange; }
    #hero { color: white; }
    .big { color: yellow; } (a) orange (b) white (c) green (d) yellow
19. 19.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 200px;
      padding: 20px;
      border: 2px solid black;
      margin: 20px;
    }
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: 50px;
      padding: 5px;
      border: 2px solid black;
      margin: 20px;
    }
21. 21.What does justify-content: flex-start do? (a) puts boxes in the middle (b) packs boxes at the end (c) packs boxes at the start (d) equal gaps, none at ends
22. 22.⚖️ What colour is the text of this element?
    <p class="red" id="end">Hi</p>
    CSS:
    .red { color: purple; }
    .red { color: white; } (a) white (b) yellow (c) green (d) purple
23. 23.What does font-weight do? (a) makes the text bold (b) sets the letter colour (c) makes letters bigger (d) colours behind the text
24. 24.🎯 Which CSS selector matches this element?
    <li class="big" id="hero">Hello</li> (a) li (b) .hero (c) #big (d) .red
25. 25.What does justify-content: center do? (a) equal gaps, none at ends (b) packs boxes at the start (c) packs boxes at the end (d) puts boxes in the middle
26. 26.🖌️ What colour is behind the letters?
    h1 {
      text-align: center;
      font-size: 20px;
      background-color: green;
      color: red;
    } (a) green (b) white (c) red
27. 27.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
28. 28.Which of these does JavaScript do? (a) sets colours and fonts (b) shows a pop-up message (c) adds space around boxes (d) rounds box corners
29. 29.🧩 Which language changes the page live? (a) CSS (b) JavaScript (c) HTML
30. 30.Which of these is the border? (a) the gap to other boxes (b) space outside the border (c) the line round the box (d) space inside the border
31. 31.True or false: #end is an element selector. (a) False (b) True
32. 32.🌈 In #rrggbb, which colour do the last two digits give? (a) blue (b) white (c) green (d) red
33. 33.✍️ What is the selector in this CSS rule?
    h2 {
      margin: 10px;
      border: 2px solid;
    } (a) margin (b) h2 (c) h1 (d) 2px solid
34. 34.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    } (a) No (b) Yes
35. 35.🎨 What does CSS stand for? (a) Computer Style Sheets (b) Creative Sheet System (c) Cascading Style Sheets (d) Colourful Site Styles
36. 36.🖌️ How big is the text, in px?
    p {
      background-color: green;
      text-align: center;
      font-size: 12px;
      color: yellow;
    }
37. 37.🌈 Which colour is rgb(255, 255, 0)? (a) white (b) cyan (c) yellow (d) red
38. 38.What does justify-content: space-between do? (a) puts boxes in the middle (b) equal gaps, none at ends (c) packs boxes at the start (d) packs boxes at the end
39. 39.⚖️ What colour is the text of this element?
    <p class="box" id="end">Hi</p>
    CSS:
    .box { color: yellow; }
    .box { color: orange; } (a) yellow (b) white (c) orange (d) black
40. 40.Which of these is padding? (a) the text or picture (b) the line round the box (c) the gap round content (d) space outside the border

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