CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 167 · 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.✍️ Which property is set to 10px in this rule?
   .box {
     text-align: center;
     margin: 10px;
     font-size: 20px;
   } (a) 10px (b) font-weight (c) padding (d) margin
2. 2.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 190px;
     justify-content: flex-start;
   }
   Inside are 2 boxes, each 80px wide (no margins).
3. 3.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 260px;
     padding: 30px;
     border: 4px solid black;
     margin: 20px;
   }
4. 4.📱 The screen is 414px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 12px;
     }
   } (a) No (b) Yes
5. 5.✍️ How many declarations (property: value pairs) are in this rule?
   h1 {
     padding: 8px;
     text-align: center;
     font-style: italic;
   }
6. 6.🎯 Which CSS selector matches this element?
   <li class="box" id="hero">Hello</li> (a) div (b) #box (c) li (d) .star
7. 7.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
8. 8.✍️ How many declarations (property: value pairs) are in this rule?
   #top {
     margin: 10px;
   }
9. 9.🎯 What kind of selector is h1? (a) a class selector (b) an element selector (c) an id selector
10. 10.💪 Which flexbox property spaces boxes along a row? (a) justify-content (b) display: flex (c) gap (d) align-items
11. 11.🎯 Can many elements share the same class? (a) Yes (b) No
12. 12.⚖️ What colour is the text of this element?
    <p class="box" id="top">Hi</p>
    CSS:
    p { color: black; }
    p { color: blue; } (a) yellow (b) blue (c) green (d) black
13. 13.🖌️ Which CSS property sets the letter colour? (a) color (b) background-color (c) font-weight (d) font-size
14. 14.✍️ Which property is set to 300px in this rule?
    #top {
      text-align: center;
      width: 300px;
      font-size: 20px;
      padding: 8px;
    } (a) width (b) color (c) font-style (d) 300px
15. 15.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    }
16. 16.What does justify-content: flex-end do? (a) packs boxes at the start (b) equal gaps, none at ends (c) packs boxes at the end (d) puts boxes in the middle
17. 17.🎯 Which CSS selector matches this element?
    <h1 class="red" id="main">Hello</h1> (a) #red (b) .red (c) #logo (d) .main
18. 18.True or false: CSS sets colours and fonts. (a) False (b) True
19. 19.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 110px;
      padding: 20px;
      border: 2px solid black;
      margin: 15px;
    }
20. 20.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 255 (c) 1000 (d) 99
21. 21.✍️ Which property is set to red in this rule?
    body {
      color: red;
      font-size: 20px;
      margin: 10px;
    } (a) color (b) text-align (c) font-size (d) red
22. 22.🎯 What kind of selector is .card? (a) an id selector (b) a class selector (c) an element selector
23. 23.🎨 One CSS file can style how many pages? (a) many pages (b) only one image (c) only one word (d) no pages
24. 24.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 16px;
      }
    } (a) Yes (b) No
25. 25.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 14px;
      }
    }
26. 26.🧩 Which language gives the page structure? (a) HTML (b) JavaScript (c) CSS
27. 27.🎯 Which element does the selector #end style? (a) <span class="end"> (b) <span id="hero"> (c) <p class="star"> (d) <span id="end">
28. 28.🖌️ Which CSS property centres a heading? (a) font-weight (b) background-color (c) text-align (d) font-family
29. 29.🌈 Which hex code is magenta? (a) #ff00ff (b) #0000ff (c) #00ffff (d) #00ff00
30. 30.🌈 Which colour is #ff0000? (a) red (b) white (c) black (d) bright green
31. 31.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) neither (c) the later one (d) the first one
32. 32.Which of these does JavaScript do? (a) changes the text size (b) adds space around boxes (c) makes a link (d) counts down a timer
33. 33.✍️ How does a CSS comment start? (a) // (b) /* (c) # (d) <!--
34. 34.Which of these is the content? (a) space outside the border (b) the gap to other boxes (c) the text or picture (d) space inside the border
35. 35.Which of these does JavaScript do? (a) sets colours and fonts (b) makes a link (c) changes the text size (d) shows a pop-up message
36. 36.🌈 Which hex code is cyan? (a) #00ffff (b) #ffff00 (c) #000000 (d) #ffffff
37. 37.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 160px;
      padding: 20px;
      border: 4px solid black;
      margin: 0px;
    }
38. 38.🎯 What kind of selector is #end? (a) an element selector (b) a class selector (c) an id selector
39. 39.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 130px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 50px wide (no margins).
40. 40.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 380px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 80px wide (no margins).

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