CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 101 · 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 CSS selector matches this element?
   <p class="box" id="intro">Hello</p> (a) #main (b) #box (c) h1 (d) p
2. 2.True or false: JavaScript counts down a timer. (a) False (b) True
3. 3.Which of these is the content? (a) the line round the box (b) the gap to other boxes (c) the text or picture (d) the gap round content
4. 4.🎯 What kind of selector is h1? (a) an element selector (b) an id selector (c) a class selector
5. 5.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 280px;
     justify-content: flex-start;
   }
   Inside are 2 boxes, each 100px wide (no margins).
6. 6.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 18px;
     }
   }
7. 7.📦 In the box model, which part is space inside the border? (a) padding (b) content (c) border (d) margin
8. 8.🖌️ What colour are the letters?
   h1 {
     font-size: 24px;
     color: orange;
     text-align: left;
     background-color: purple;
   } (a) blue (b) purple (c) orange
9. 9.🖌️ Which CSS property sets the letter colour? (a) font-family (b) font-size (c) font-weight (d) color
10. 10.✍️ Which property is set to 8px in this rule?
    .box {
      text-align: center;
      padding: 8px;
      border: 2px solid;
    } (a) font-weight (b) padding (c) 8px (d) border
11. 11.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 300px;
      justify-content: center;
    }
    Inside are 4 boxes, each 50px wide (no margins).
12. 12.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 100px;
      padding: 25px;
      border: 2px solid black;
      margin: 5px;
    }
13. 13.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 160px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 40px wide (no margins).
14. 14.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 260px;
      padding: 25px;
      border: 3px solid black;
      margin: 10px;
    }
15. 15.🎨 Which tag connects an outside CSS file? (a) <img> (b) <css> (c) <a> (d) <link>
16. 16.🖌️ What colour is behind the letters?
    li {
      background-color: black;
      color: orange;
      text-align: left;
      font-size: 40px;
    } (a) black (b) blue (c) orange
17. 17.What does font-size do? (a) makes the text bold (b) picks the font style (c) makes letters bigger (d) centres a heading
18. 18.True or false: the border is space inside the border. (a) False (b) True
19. 19.True or false: CSS checks a quiz answer. (a) False (b) True
20. 20.🖌️ Where does the text sit on its line?
    li {
      background-color: orange;
      font-size: 36px;
      color: purple;
      text-align: right;
    } (a) in the middle (b) on the left (c) on the right
21. 21.💪 Which justify-content value packs boxes at the end? (a) center (b) flex-end (c) space-between (d) flex-start
22. 22.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      background-color: yellow;
    }
23. 23.What does justify-content: center do? (a) packs boxes at the end (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the start
24. 24.🧩 Which language puts a picture on a page? (a) HTML (b) CSS (c) JavaScript
25. 25.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
26. 26.📱 What does a media query check? (a) the page title (b) the battery level (c) the screen width (d) the time of day
27. 27.✍️ What value is given to color in this rule?
    li {
      border: 2px solid;
      color: red;
    } (a) color (b) red (c) 20px (d) center
28. 28.🎯 Which element does the selector h2 style? (a) <span id="intro"> (b) <li> (c) <div class="red"> (d) <h2 class="red">
29. 29.📦 In the box model, which part is the text or picture? (a) padding (b) margin (c) content (d) border
30. 30.✍️ What value is given to margin in this rule?
    .box {
      font-style: italic;
      margin: 10px;
      background-color: yellow;
    } (a) 8px (b) bold (c) 10px (d) margin
31. 31.🌈 In #00003d the blue part is the hex number 3d. What is it as a normal number?
32. 32.🎯 What kind of selector is #main? (a) an element selector (b) an id selector (c) a class selector
33. 33.What does text-align do? (a) makes the text bold (b) makes letters bigger (c) colours behind the text (d) centres a heading
34. 34.🌈 Which colour is rgb(255, 0, 0)? (a) blue (b) magenta (c) red (d) white
35. 35.✍️ Which property is set to italic in this rule?
    h1 {
      color: red;
      font-style: italic;
    } (a) color (b) font-size (c) italic (d) font-style
36. 36.🖌️ How big is the text, in px?
    li {
      background-color: purple;
      text-align: right;
      font-size: 28px;
      color: yellow;
    }
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: 70px;
      padding: 5px;
      border: 3px solid black;
      margin: 5px;
    }
38. 38.✍️ CSS declarations go inside which brackets? (a) < > (b) ( ) (c) { } (d) [ ]
39. 39.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 260px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 80px wide (no margins).
40. 40.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 320px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 100px wide (no margins).

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