CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 349 · 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 many declarations (property: value pairs) are in this rule?
   p {
     font-style: italic;
   }
2. 2.🎨 Which tag connects an outside CSS file? (a) <css> (b) <a> (c) <link> (d) <img>
3. 3.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 360px;
     justify-content: center;
   }
   Inside are 3 boxes, each 80px wide (no margins).
4. 4.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 120px;
     padding: 10px;
     border: 3px solid black;
     margin: 0px;
   }
5. 5.📱 The screen is 414px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (min-width: 600px) {
     p {
       font-size: 24px;
     }
   } (a) Yes (b) No
6. 6.🎯 Which CSS selector matches this element?
   <h2 class="box" id="logo">Hello</h2> (a) #box (b) .box (c) li (d) .logo
7. 7.True or false: HTML counts down a timer. (a) True (b) False
8. 8.📱 Responsive design means a page ___. (a) fits every screen (b) never changes (c) has no pictures (d) is only for laptops
9. 9.🔍 Which is the odd one out? (a) changes the page live (b) makes headings and lists (c) reacts to a button click (d) counts down a timer
10. 10.🖌️ What colour is behind the letters?
    li {
      background-color: blue;
      font-size: 36px;
      text-align: left;
      color: white;
    } (a) blue (b) black (c) white
11. 11.🎨 One CSS file can style how many pages? (a) only one word (b) only one image (c) many pages (d) no pages
12. 12.🎯 Which element does the selector .big style? (a) <h1 class="red"> (b) <h1 class="big"> (c) <h1 id="big"> (d) <h2 class="box">
13. 13.True or false: .card is a class selector. (a) False (b) True
14. 14.✍️ What value is given to text-align in this rule?
    body {
      font-style: italic;
      text-align: center;
      font-weight: bold;
    } (a) center (b) 10px (c) yellow (d) text-align
15. 15.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 160px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 60px wide (no margins).
16. 16.🖌️ How big is the text, in px?
    li {
      color: green;
      font-size: 36px;
      text-align: left;
      background-color: white;
    }
17. 17.🎯 Which CSS selector matches this element?
    <span class="big" id="top">Hello</span> (a) #big (b) p (c) span (d) .top
18. 18.Which of these does HTML do? (a) checks a quiz answer (b) lays out the page (c) reacts to a button click (d) puts a picture on a page
19. 19.🎯 Which element does the selector .box style? (a) <h1 class="star"> (b) <h1 id="box"> (c) <h1 class="box"> (d) <h2 class="menu">
20. 20.💪 Which flexbox property picks row or column? (a) align-items (b) display: flex (c) flex-direction (d) justify-content
21. 21.🎯 Which CSS selector matches this element?
    <div class="big" id="top">Hello</div> (a) #big (b) #intro (c) .red (d) div
22. 22.🌈 Which colour is rgb(255, 255, 0)? (a) black (b) bright green (c) magenta (d) yellow
23. 23.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    }
24. 24.🔍 Which is the odd one out? (a) makes a link (b) gives the page structure (c) puts a picture on a page (d) rounds box corners
25. 25.🧩 Which language gives the page structure? (a) JavaScript (b) HTML (c) CSS
26. 26.🌈 Which hex code is white? (a) #ffff00 (b) #ffffff (c) #00ffff (d) #ff0000
27. 27.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 120px;
      padding: 5px;
      border: 4px solid black;
      margin: 5px;
    }
28. 28.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 2 (b) 3 (c) 6 (d) 4
29. 29.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 14px;
      }
    }
30. 30.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 8px;
      }
    }
31. 31.🧩 Which language rounds box corners? (a) CSS (b) HTML (c) JavaScript
32. 32.Which of these does CSS do? (a) reacts to a button click (b) lays out the page (c) makes headings and lists (d) counts down a timer
33. 33.✍️ How does a CSS comment start? (a) <!-- (b) // (c) /* (d) #
34. 34.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 12px;
      }
    }
35. 35.🖌️ Which CSS property picks the font style? (a) text-align (b) color (c) font-weight (d) font-family
36. 36.🔍 Which is the odd one out? (a) makes a form box (b) makes headings and lists (c) gives the page structure (d) sets colours and fonts
37. 37.📱 What does a media query check? (a) the page title (b) the time of day (c) the battery level (d) the screen width
38. 38.✍️ In color: blue; which part is the property? (a) : (b) ; (c) blue (d) color
39. 39.🖌️ What colour are the letters?
    p {
      text-align: left;
      font-size: 40px;
      color: blue;
      background-color: red;
    } (a) red (b) purple (c) blue
40. 40.🎯 What kind of selector is .menu? (a) a class selector (b) an element selector (c) an id selector

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