CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 915 · 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: 220px;
     padding: 15px;
     border: 5px solid black;
     margin: 20px;
   }
2. 2.⚖️ What colour is the text of this element?
   <p class="red" id="main">Hi</p>
   CSS:
   .red { color: purple; }
   .red { color: yellow; } (a) blue (b) purple (c) yellow (d) green
3. 3.✍️ CSS declarations go inside which brackets? (a) [ ] (b) { } (c) ( ) (d) < >
4. 4.💪 Which flexbox property turns on flexbox? (a) flex-direction (b) align-items (c) display: flex (d) gap
5. 5.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) space-between (c) flex-end (d) center
6. 6.What does background-color do? (a) makes the text bold (b) makes letters bigger (c) colours behind the text (d) centres a heading
7. 7.🌈 Which colour of light is strongest in rgb(79, 176, 68)? (a) blue (b) green (c) red
8. 8.💪 Which flexbox property sets space between boxes? (a) gap (b) justify-content (c) flex-direction (d) display: flex
9. 9.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 220px;
     justify-content: flex-end;
   }
   Inside are 4 boxes, each 40px wide (no margins).
10. 10.True or false: JavaScript makes a form box. (a) True (b) False
11. 11.🎯 Which sign starts an id selector? (a) # (b) . (c) @ (d) &
12. 12.✍️ What is the selector in this CSS rule?
    h2 {
      font-size: 20px;
      margin: 10px;
    } (a) h2 (b) font-size (c) 10px (d) h1
13. 13.Which of these does CSS do? (a) changes the page live (b) changes the text size (c) makes a link (d) shows a pop-up message
14. 14.📱 What does a media query check? (a) the battery level (b) the page title (c) the time of day (d) the screen width
15. 15.✍️ What is the selector in this CSS rule?
    p {
      text-align: center;
      font-style: italic;
      margin: 10px;
      border: 2px solid;
    } (a) text-align (b) italic (c) .note (d) p
16. 16.💪 Which justify-content value puts boxes in the middle? (a) flex-end (b) flex-start (c) center (d) space-between
17. 17.🎯 Which element does the selector #logo style? (a) <h1 class="note"> (b) <p class="logo"> (c) <p id="logo"> (d) <p id="end">
18. 18.📱 max-width: 600px applies when the screen is ___. (a) turned off (b) 600px or narrower (c) 600px or wider (d) exactly 1000px
19. 19.✍️ In color: blue; which part is the property? (a) : (b) ; (c) color (d) blue
20. 20.🌈 Which colour is rgb(0, 255, 0)? (a) blue (b) yellow (c) bright green (d) cyan
21. 21.🎯 What kind of selector is p? (a) an id selector (b) a class selector (c) an element selector
22. 22.Which of these does CSS do? (a) lays out the page (b) reacts to a button click (c) makes a link (d) makes a form box
23. 23.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
24. 24.✍️ What is the selector in this CSS rule?
    h1 {
      font-weight: bold;
      width: 300px;
      color: red;
    } (a) p (b) 300px (c) h1 (d) font-weight
25. 25.⚖️ What colour is the text of this element?
    <h1 class="red" id="main">Hi</h1>
    CSS:
    .red { color: black; }
    .red { color: orange; } (a) red (b) black (c) orange (d) blue
26. 26.🎯 What kind of selector is .big? (a) an element selector (b) an id selector (c) a class selector
27. 27.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 260px;
      justify-content: center;
    }
    Inside are 3 boxes, each 40px wide (no margins).
28. 28.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 14px;
      }
    } (a) Yes (b) No
29. 29.⚖️ What colour is the text of this element?
    <p class="big" id="top">Hi</p>
    CSS:
    .big { color: blue; }
    .big { color: purple; } (a) green (b) purple (c) red (d) blue
30. 30.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 24px;
      }
    }
31. 31.✍️ What value is given to color in this rule?
    p {
      color: red;
      text-align: center;
      font-weight: bold;
      width: 300px;
    } (a) center (b) color (c) 20px (d) red
32. 32.🎨 Which tag connects an outside CSS file? (a) <img> (b) <css> (c) <a> (d) <link>
33. 33.🧩 Which language gives the page structure? (a) JavaScript (b) HTML (c) CSS
34. 34.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 32px;
      }
    }
35. 35.True or false: #top is an id selector. (a) True (b) False
36. 36.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) center (c) flex-start (d) space-between
37. 37.🖌️ Which CSS property picks the font style? (a) color (b) font-weight (c) font-family (d) font-size
38. 38.🎯 Which element does the selector .note style? (a) <h1 id="note"> (b) <h2 class="red"> (c) <h1 class="big"> (d) <h1 class="note">
39. 39.True or false: CSS changes the page live. (a) True (b) False
40. 40.Which of these does JavaScript do? (a) lays out the page (b) rounds box corners (c) makes headings and lists (d) shows a pop-up message

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