CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 380 · 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.📱 The screen is 700px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 18px;
     }
   } (a) Yes (b) No
2. 2.True or false: the content is a solid or dotted edge. (a) True (b) False
3. 3.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 110px;
     padding: 20px;
     border: 1px solid black;
     margin: 15px;
   }
4. 4.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 40px;
     padding: 20px;
     border: 4px solid black;
     margin: 10px;
   }
5. 5.🔍 Which is the odd one out? (a) makes a form box (b) gives the page structure (c) makes a link (d) changes the text size
6. 6.🧩 Which language rounds box corners? (a) HTML (b) JavaScript (c) CSS
7. 7.🎯 What kind of selector is .big? (a) a class selector (b) an id selector (c) an element selector
8. 8.🔍 Which is the odd one out? (a) gives the page structure (b) checks a quiz answer (c) makes a link (d) makes a form box
9. 9.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 350px;
     justify-content: space-between;
   }
   Inside are 4 boxes, each 80px wide (no margins).
10. 10.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    } (a) No (b) Yes
11. 11.⚖️ What colour is the text of this element?
    <h2 class="box" id="main">Hi</h2>
    CSS:
    h2 { color: red; }
    #main { color: white; } (a) green (b) white (c) blue (d) red
12. 12.📦 In the box model, which part is space inside the border? (a) content (b) border (c) padding (d) margin
13. 13.🖌️ What colour is behind the letters?
    li {
      font-size: 20px;
      color: red;
      text-align: right;
      background-color: orange;
    } (a) blue (b) orange (c) red
14. 14.⚖️ What colour is the text of this element?
    <h2 class="big" id="main">Hi</h2>
    CSS:
    .big { color: white; }
    h2 { color: blue; } (a) yellow (b) orange (c) blue (d) white
15. 15.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 230px;
      padding: 30px;
      border: 4px solid black;
      margin: 15px;
    }
16. 16.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) center (c) space-between (d) flex-start
17. 17.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 2 (b) 3 (c) 4 (d) 6
18. 18.🖌️ Where does the text sit on its line?
    p {
      background-color: black;
      font-size: 40px;
      color: orange;
      text-align: right;
    } (a) in the middle (b) on the left (c) on the right
19. 19.⚖️ What colour is the text of this element?
    <p class="note" id="top">Hi</p>
    CSS:
    .note { color: purple; }
    .note { color: white; } (a) blue (b) white (c) black (d) purple
20. 20.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
21. 21.⚖️ What colour is the text of this element?
    <h2 class="star" id="top">Hi</h2>
    CSS:
    #top { color: orange; }
    #top { color: black; } (a) black (b) orange (c) blue (d) green
22. 22.🖌️ What colour is behind the letters?
    li {
      text-align: left;
      font-size: 40px;
      color: blue;
      background-color: red;
    } (a) red (b) black (c) blue
23. 23.🔍 Which is the odd one out? (a) rounds box corners (b) puts a picture on a page (c) gives the page structure (d) makes headings and lists
24. 24.⚖️ What colour is the text of this element?
    <h1 class="menu" id="logo">Hi</h1>
    CSS:
    .menu { color: blue; }
    #logo { color: yellow; } (a) yellow (b) orange (c) blue (d) green
25. 25.💪 Which justify-content value packs boxes at the end? (a) center (b) flex-start (c) flex-end (d) space-between
26. 26.🖌️ Where does the text sit on its line?
    li {
      color: white;
      font-size: 24px;
      text-align: right;
      background-color: red;
    } (a) on the left (b) in the middle (c) on the right
27. 27.⚖️ What colour is the text of this element?
    <h2 class="box" id="logo">Hi</h2>
    CSS:
    h2 { color: orange; }
    h2 { color: blue; } (a) blue (b) orange (c) yellow (d) green
28. 28.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) 800px or wider (c) turned off (d) exactly 100px
29. 29.🌈 Which colour of light is strongest in rgb(202, 83, 13)? (a) red (b) blue (c) green
30. 30.💪 Which justify-content value puts boxes in the middle? (a) flex-end (b) flex-start (c) space-between (d) center
31. 31.Which of these is padding? (a) a solid or dotted edge (b) space inside the border (c) the gap to other boxes (d) space outside the border
32. 32.Which of these does CSS do? (a) gives the page structure (b) puts a picture on a page (c) sets colours and fonts (d) reacts to a button click
33. 33.🖌️ Which CSS property colours behind the text? (a) color (b) font-weight (c) font-size (d) background-color
34. 34.🎨 Which tag holds CSS inside the head? (a) <script> (b) <css> (c) <body> (d) <style>
35. 35.💪 Which flexbox property spaces boxes along a row? (a) align-items (b) justify-content (c) gap (d) flex-direction
36. 36.🎨 One CSS file can style how many pages? (a) no pages (b) many pages (c) only one image (d) only one word
37. 37.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      border: 2px solid;
      text-align: center;
      font-size: 20px;
      margin: 10px;
    }
38. 38.🎯 What kind of selector is #top? (a) a class selector (b) an element selector (c) an id selector
39. 39.🧩 Which language makes a form box? (a) HTML (b) CSS (c) JavaScript
40. 40.🎯 What kind of selector is img? (a) a class selector (b) an id selector (c) an element selector

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