CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 397 · 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 language changes the page live? (a) JavaScript (b) CSS (c) HTML
2. 2.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 260px;
     justify-content: center;
   }
   Inside are 2 boxes, each 60px wide (no margins).
3. 3.True or false: .card is an element selector. (a) False (b) True
4. 4.🎯 Which element does the selector #intro style? (a) <li id="intro"> (b) <div class="red"> (c) <li class="intro"> (d) <li id="main">
5. 5.✍️ How many declarations (property: value pairs) are in this rule?
   h2 {
     padding: 8px;
     width: 300px;
     font-size: 20px;
   }
6. 6.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 140px;
     padding: 30px;
     border: 5px solid black;
     margin: 10px;
   }
7. 7.✍️ How many declarations (property: value pairs) are in this rule?
   h2 {
     color: red;
   }
8. 8.📱 What does a media query check? (a) the battery level (b) the time of day (c) the page title (d) the screen width
9. 9.📱 The screen is 1366px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 20px;
     }
   } (a) No (b) Yes
10. 10.🎨 What does CSS stand for? (a) Colourful Site Styles (b) Creative Sheet System (c) Cascading Style Sheets (d) Computer Style Sheets
11. 11.🎯 Which CSS selector matches this element?
    <div class="box" id="hero">Hello</div> (a) span (b) .star (c) .hero (d) .box
12. 12.True or false: CSS reacts to a button click. (a) False (b) True
13. 13.🖌️ What colour is behind the letters?
    h1 {
      font-size: 28px;
      color: green;
      text-align: right;
      background-color: blue;
    } (a) orange (b) blue (c) green
14. 14.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 270px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 60px wide (no margins).
15. 15.📱 Responsive design means a page ___. (a) fits every screen (b) has no pictures (c) is only for laptops (d) never changes
16. 16.🌈 Which colour is rgb(0, 0, 255)? (a) bright green (b) magenta (c) yellow (d) blue
17. 17.⚖️ What colour is the text of this element?
    <p class="note" id="main">Hi</p>
    CSS:
    p { color: green; }
    p { color: yellow; } (a) blue (b) purple (c) yellow (d) green
18. 18.🖌️ What colour is behind the letters?
    h2 {
      color: orange;
      background-color: red;
      font-size: 36px;
      text-align: center;
    } (a) red (b) orange (c) green
19. 19.⚖️ What colour is the text of this element?
    <h1 class="box" id="logo">Hi</h1>
    CSS:
    .box { color: black; }
    .box { color: blue; } (a) black (b) purple (c) red (d) blue
20. 20.Which of these is margin? (a) the gap round content (b) space outside the border (c) space inside the border (d) the text or picture
21. 21.Which of these does CSS do? (a) gives the page structure (b) rounds box corners (c) makes a form box (d) changes the page live
22. 22.🎯 Can many elements share the same class? (a) No (b) Yes
23. 23.True or false: p is an element selector. (a) False (b) True
24. 24.True or false: padding is the text or picture. (a) False (b) True
25. 25.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 120px;
      justify-content: center;
    }
    Inside are 2 boxes, each 40px wide (no margins).
26. 26.🌈 Which colour is #00ffff? (a) red (b) cyan (c) bright green (d) blue
27. 27.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 1000 (c) 255 (d) 99
28. 28.🔍 Which is the odd one out? (a) makes a form box (b) makes headings and lists (c) gives the page structure (d) shows a pop-up message
29. 29.🎯 What kind of selector is .big? (a) an id selector (b) an element selector (c) a class selector
30. 30.🖌️ How big is the text, in px?
    h2 {
      color: blue;
      background-color: green;
      text-align: right;
      font-size: 16px;
    }
31. 31.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 20px;
      }
    }
32. 32.⚖️ Which selector is the weakest? (a) a class selector (b) an element selector (c) an id selector
33. 33.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      font-style: italic;
      margin: 10px;
    }
34. 34.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 28px;
      }
    }
35. 35.🖌️ How big is the text, in px?
    h1 {
      background-color: orange;
      color: red;
      text-align: left;
      font-size: 20px;
    }
36. 36.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 290px;
      padding: 20px;
      border: 4px solid black;
      margin: 20px;
    }
37. 37.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) red (c) black (d) blue
38. 38.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    }
39. 39.🧩 Which language rounds box corners? (a) CSS (b) JavaScript (c) HTML
40. 40.📦 In the box model, which part is space inside the border? (a) padding (b) border (c) content (d) margin

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