CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 900 · 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: 110px;
     padding: 15px;
     border: 1px solid black;
     margin: 20px;
   }
2. 2.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 420px;
     justify-content: center;
   }
   Inside are 3 boxes, each 100px wide (no margins).
3. 3.✍️ What value is given to text-align in this rule?
   #top {
     text-align: center;
     padding: 8px;
     font-weight: bold;
   } (a) center (b) 10px (c) yellow (d) text-align
4. 4.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 70px;
     padding: 10px;
     border: 5px solid black;
     margin: 20px;
   }
5. 5.🎨 Which attribute adds CSS inside one tag? (a) href (b) alt (c) src (d) style
6. 6.✍️ What value is given to padding in this rule?
   p {
     font-style: italic;
     margin: 10px;
     padding: 8px;
   } (a) 8px (b) bold (c) 2px solid (d) padding
7. 7.🎯 Which CSS selector matches this element?
   <h2 class="box" id="hero">Hello</h2> (a) .hero (b) h2 (c) #box (d) #top
8. 8.True or false: HTML makes a link. (a) False (b) True
9. 9.True or false: li is a class selector. (a) True (b) False
10. 10.🧩 Which language sets colours and fonts? (a) HTML (b) JavaScript (c) CSS
11. 11.🌈 In #000040 the blue part is the hex number 40. What is it as a normal number?
12. 12.Which of these does HTML do? (a) makes a form box (b) rounds box corners (c) counts down a timer (d) changes the text size
13. 13.📦 In the box model, which part is a solid or dotted edge? (a) padding (b) margin (c) content (d) border
14. 14.🎯 Which CSS selector matches this element?
    <span class="star" id="top">Hello</span> (a) #top (b) #intro (c) #star (d) .top
15. 15.What does justify-content: space-between do? (a) puts boxes in the middle (b) packs boxes at the start (c) equal gaps, none at ends (d) packs boxes at the end
16. 16.📦 In the box model, which part is space outside the border? (a) padding (b) margin (c) border (d) content
17. 17.🎨 What does CSS stand for? (a) Colourful Site Styles (b) Creative Sheet System (c) Computer Style Sheets (d) Cascading Style Sheets
18. 18.🎯 Which element does the selector li style? (a) <div> (b) <li class="menu"> (c) <span class="menu"> (d) <p id="main">
19. 19.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 8px;
      }
    } (a) Yes (b) No
20. 20.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    }
21. 21.✍️ What is the selector in this CSS rule?
    .box {
      font-style: italic;
      margin: 10px;
      background-color: yellow;
      font-weight: bold;
    } (a) h2 (b) font-style (c) 10px (d) .box
22. 22.🖌️ What colour are the letters?
    p {
      font-size: 12px;
      background-color: red;
      text-align: left;
      color: white;
    } (a) red (b) white (c) green
23. 23.✍️ Which property is set to italic in this rule?
    .note {
      font-style: italic;
      margin: 10px;
      border: 2px solid;
    } (a) font-style (b) font-size (c) italic (d) color
24. 24.🧩 Which language adds space around boxes? (a) JavaScript (b) HTML (c) CSS
25. 25.True or false: padding is the text or picture. (a) True (b) False
26. 26.What does justify-content: flex-start do? (a) puts boxes in the middle (b) packs boxes at the end (c) equal gaps, none at ends (d) packs boxes at the start
27. 27.Which of these is the border? (a) the gap round content (b) the line round the box (c) the gap to other boxes (d) space inside the border
28. 28.🔍 Which is the odd one out? (a) checks a quiz answer (b) reacts to a button click (c) shows a pop-up message (d) makes a link
29. 29.⚖️ What colour is the text of this element?
    <h2 class="menu" id="end">Hi</h2>
    CSS:
    h2 { color: white; }
    h2 { color: yellow; } (a) yellow (b) white (c) red (d) blue
30. 30.🖌️ What colour is behind the letters?
    p {
      color: yellow;
      font-size: 24px;
      text-align: right;
      background-color: red;
    } (a) black (b) red (c) yellow
31. 31.✍️ In color: blue; which part is the value? (a) color (b) : (c) blue (d) ;
32. 32.⚖️ What colour is the text of this element?
    <h1 class="big" id="main">Hi</h1>
    CSS:
    h1 { color: blue; }
    h1 { color: black; } (a) blue (b) yellow (c) green (d) black
33. 33.True or false: CSS adds space around boxes. (a) False (b) True
34. 34.🧩 Which language changes the page live? (a) CSS (b) JavaScript (c) HTML
35. 35.🎯 What kind of selector is #hero? (a) an element selector (b) a class selector (c) an id selector
36. 36.💪 Which justify-content value packs boxes at the end? (a) flex-end (b) center (c) space-between (d) flex-start
37. 37.🌈 Which colour is rgb(255, 0, 0)? (a) white (b) cyan (c) red (d) black
38. 38.📱 Responsive design means a page ___. (a) fits every screen (b) is only for laptops (c) never changes (d) has no pictures
39. 39.Which of these is the content? (a) the text or picture (b) the gap to other boxes (c) the gap round content (d) space inside the border
40. 40.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 210px;
      justify-content: center;
    }
    Inside are 3 boxes, each 50px wide (no margins).

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