CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 7 · 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 {
     color: red;
   }
2. 2.🌈 In #rrggbb, which colour do the last two digits give? (a) blue (b) red (c) green (d) white
3. 3.💪 Which justify-content value packs boxes at the end? (a) center (b) flex-start (c) flex-end (d) space-between
4. 4.📱 The screen is 375px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 22px;
     }
   } (a) Yes (b) No
5. 5.📱 Responsive design means a page ___. (a) never changes (b) fits every screen (c) has no pictures (d) is only for laptops
6. 6.🎯 Which CSS selector matches this element?
   <p class="red" id="intro">Hello</p> (a) h1 (b) .intro (c) #main (d) .red
7. 7.🎯 Which sign starts a class selector? (a) # (b) & (c) @ (d) .
8. 8.📦 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: 25px;
     border: 4px solid black;
     margin: 5px;
   }
9. 9.What does font-size do? (a) centres a heading (b) makes the text bold (c) picks the font style (d) makes letters bigger
10. 10.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 70px;
      padding: 5px;
      border: 2px solid black;
      margin: 10px;
    }
11. 11.🧩 Which language checks a quiz answer? (a) JavaScript (b) CSS (c) HTML
12. 12.🔍 Which is the odd one out? (a) puts a picture on a page (b) reacts to a button click (c) gives the page structure (d) makes a link
13. 13.🌈 Which colour is #ffffff? (a) white (b) yellow (c) cyan (d) bright green
14. 14.🌈 Which hex code is bright green? (a) #0000ff (b) #00ffff (c) #00ff00 (d) #ffff00
15. 15.⚖️ What colour is the text of this element?
    <h1 class="menu" id="hero">Hi</h1>
    CSS:
    h1 { color: blue; }
    .menu { color: purple; } (a) black (b) purple (c) blue (d) white
16. 16.Which of these does HTML do? (a) checks a quiz answer (b) adds space around boxes (c) shows a pop-up message (d) makes a form box
17. 17.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 320px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 80px wide (no margins).
18. 18.🌈 Which colour is rgb(255, 255, 255)? (a) red (b) white (c) bright green (d) yellow
19. 19.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      border: 2px solid;
      width: 300px;
    }
20. 20.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
21. 21.🖌️ What colour is behind the letters?
    h2 {
      background-color: white;
      font-size: 36px;
      text-align: left;
      color: red;
    } (a) red (b) blue (c) white
22. 22.🎨 What does CSS stand for? (a) Creative Sheet System (b) Computer Style Sheets (c) Colourful Site Styles (d) Cascading Style Sheets
23. 23.✍️ What value is given to margin in this rule?
    body {
      margin: 10px;
      font-style: italic;
      padding: 8px;
    } (a) 10px (b) 8px (c) margin (d) bold
24. 24.🌈 Which colour is #00ffff? (a) red (b) black (c) cyan (d) yellow
25. 25.⚖️ What colour is the text of this element?
    <p class="menu" id="logo">Hi</p>
    CSS:
    .menu { color: white; }
    #logo { color: green; } (a) purple (b) orange (c) green (d) white
26. 26.📦 In the box model, which part is the gap to other boxes? (a) content (b) border (c) padding (d) margin
27. 27.🌈 Which colour of light is strongest in rgb(168, 13, 1)? (a) green (b) blue (c) red
28. 28.🎯 Which element does the selector li style? (a) <div> (b) <span class="big"> (c) <li class="big"> (d) <p id="end">
29. 29.🎯 Which element does the selector #intro style? (a) <h1 class="box"> (b) <p id="intro"> (c) <p class="intro"> (d) <p id="main">
30. 30.What does justify-content: space-between do? (a) puts boxes in the middle (b) packs boxes at the end (c) equal gaps, none at ends (d) packs boxes at the start
31. 31.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 24px;
      }
    }
32. 32.🎨 One CSS file can style how many pages? (a) only one word (b) many pages (c) only one image (d) no pages
33. 33.True or false: HTML sets colours and fonts. (a) False (b) True
34. 34.🎨 A CSS file usually ends with which extension? (a) .css (b) .png (c) .js (d) .html
35. 35.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 16px;
      }
    }
36. 36.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 40px;
      padding: 25px;
      border: 3px solid black;
      margin: 0px;
    }
37. 37.💪 Which flexbox property turns on flexbox? (a) display: flex (b) flex-direction (c) justify-content (d) gap
38. 38.Which of these is the border? (a) space inside the border (b) space outside the border (c) the text or picture (d) the line round the box
39. 39.True or false: the border is the line round the box. (a) False (b) True
40. 40.🌈 Hex digits go 0 to 9, then A to which letter? (a) J (b) F (c) G (d) Z

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