CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 25 · 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 element does the selector #intro style? (a) <h2 class="note"> (b) <h1 id="main"> (c) <h1 id="intro"> (d) <h1 class="intro">
2. 2.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 220px;
     justify-content: space-between;
   }
   Inside are 2 boxes, each 100px wide (no margins).
3. 3.💪 Which justify-content value packs boxes at the start? (a) center (b) flex-end (c) space-between (d) flex-start
4. 4.🌈 In #00f900 the green part is the hex number f9. What is it as a normal number?
5. 5.True or false: padding is the text or picture. (a) True (b) False
6. 6.🖌️ How big is the text, in px?
   h2 {
     text-align: left;
     background-color: purple;
     font-size: 24px;
     color: black;
   }
7. 7.💪 Which justify-content value puts boxes in the middle? (a) center (b) space-between (c) flex-end (d) flex-start
8. 8.True or false: margin is space outside the border. (a) True (b) False
9. 9.🎨 A CSS file usually ends with which extension? (a) .css (b) .js (c) .png (d) .html
10. 10.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 26px;
      }
    } (a) Yes (b) No
11. 11.🖌️ Which CSS property makes the text bold? (a) font-size (b) background-color (c) color (d) font-weight
12. 12.✍️ What is the selector in this CSS rule?
    h2 {
      text-align: center;
      font-weight: bold;
    } (a) h2 (b) bold (c) text-align (d) h1
13. 13.🌈 Hex digits go 0 to 9, then A to which letter? (a) Z (b) F (c) J (d) G
14. 14.Which of these does JavaScript do? (a) adds space around boxes (b) makes a link (c) changes the text size (d) changes the page live
15. 15.💪 Which flexbox property picks row or column? (a) justify-content (b) align-items (c) flex-direction (d) display: flex
16. 16.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 8px;
      }
    } (a) Yes (b) No
17. 17.🧩 Which language rounds box corners? (a) CSS (b) HTML (c) JavaScript
18. 18.⚖️ What colour is the text of this element?
    <h2 class="box" id="hero">Hi</h2>
    CSS:
    .box { color: red; }
    #hero { color: purple; } (a) white (b) blue (c) red (d) purple
19. 19.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 140px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 40px wide (no margins).
20. 20.✍️ What is the selector in this CSS rule?
    .note {
      background-color: yellow;
      border: 2px solid;
      color: red;
      font-size: 20px;
    } (a) .note (b) 2px solid (c) background-color (d) #top
21. 21.💪 Which justify-content value equal gaps, none at ends? (a) space-between (b) center (c) flex-end (d) flex-start
22. 22.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      width: 300px;
    }
23. 23.What does justify-content: center do? (a) packs boxes at the end (b) packs boxes at the start (c) puts boxes in the middle (d) equal gaps, none at ends
24. 24.⚖️ Which selector is the strongest? (a) an element selector (b) a class selector (c) an id selector
25. 25.⚖️ What colour is the text of this element?
    <p class="red" id="intro">Hi</p>
    CSS:
    .red { color: blue; }
    p { color: black; } (a) blue (b) black (c) purple (d) orange
26. 26.📱 What does a media query check? (a) the battery level (b) the screen width (c) the page title (d) the time of day
27. 27.Which of these does HTML do? (a) rounds box corners (b) changes the text size (c) makes a form box (d) adds space around boxes
28. 28.What does background-color do? (a) makes the text bold (b) picks the font style (c) makes letters bigger (d) colours behind the text
29. 29.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 110px;
      padding: 15px;
      border: 4px solid black;
      margin: 5px;
    }
30. 30.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      color: red;
      width: 300px;
      background-color: yellow;
      text-align: center;
    }
31. 31.🌈 Which hex code is cyan? (a) #ff00ff (b) #000000 (c) #0000ff (d) #00ffff
32. 32.Which of these does JavaScript do? (a) lays out the page (b) sets colours and fonts (c) reacts to a button click (d) gives the page structure
33. 33.🖌️ Which CSS property makes letters bigger? (a) font-weight (b) color (c) background-color (d) font-size
34. 34.📦 In the box model, which part is the gap round content? (a) content (b) border (c) margin (d) padding
35. 35.🧩 Which language sets colours and fonts? (a) CSS (b) HTML (c) JavaScript
36. 36.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 20px;
      }
    }
37. 37.🎯 How many elements on a page should have the same id? (a) 1 (b) 2 (c) any number (d) 5
38. 38.🎯 Which CSS selector matches this element?
    <p class="note" id="end">Hello</p> (a) #end (b) .end (c) #note (d) #hero
39. 39.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 320px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 50px wide (no margins).
40. 40.⚖️ What colour is the text of this element?
    <h2 class="star" id="intro">Hi</h2>
    CSS:
    #intro { color: yellow; }
    #intro { color: purple; } (a) green (b) purple (c) white (d) yellow

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