CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 71 · 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 text size? (a) JavaScript (b) HTML (c) CSS
2. 2.✍️ How does a CSS comment start? (a) /* (b) <!-- (c) # (d) //
3. 3.📦 In the box model, which part is the line round the box? (a) border (b) margin (c) padding (d) content
4. 4.⚖️ What colour is the text of this element?
   <p class="box" id="main">Hi</p>
   CSS:
   #main { color: blue; }
   #main { color: black; } (a) blue (b) red (c) black (d) green
5. 5.✍️ Which sign goes between a property and its value? (a) - (b) : (c) ; (d) =
6. 6.True or false: margin is space outside the border. (a) True (b) False
7. 7.📱 The screen is 375px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 14px;
     }
   } (a) Yes (b) No
8. 8.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 220px;
     justify-content: center;
   }
   Inside are 4 boxes, each 40px wide (no margins).
9. 9.🎯 Which element does the selector #hero style? (a) <p class="big"> (b) <span id="top"> (c) <span class="hero"> (d) <span id="hero">
10. 10.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 250px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 50px wide (no margins).
11. 11.🧩 Which language counts down a timer? (a) HTML (b) JavaScript (c) CSS
12. 12.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
13. 13.🎨 One CSS file can style how many pages? (a) many pages (b) no pages (c) only one image (d) only one word
14. 14.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 18px;
      }
    }
15. 15.⚖️ What colour is the text of this element?
    <p class="big" id="end">Hi</p>
    CSS:
    p { color: red; }
    p { color: green; } (a) red (b) blue (c) green (d) black
16. 16.Which of these is margin? (a) space inside the border (b) the gap round content (c) the text or picture (d) space outside the border
17. 17.🌈 In #00e500 the green part is the hex number e5. What is it as a normal number?
18. 18.🌈 Which hex code is cyan? (a) #00ffff (b) #ffffff (c) #00ff00 (d) #0000ff
19. 19.✍️ Which property is set to yellow in this rule?
    .note {
      width: 300px;
      background-color: yellow;
    } (a) background-color (b) yellow (c) margin (d) padding
20. 20.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 12px;
      }
    } (a) Yes (b) No
21. 21.What does justify-content: center 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
22. 22.🎯 Which CSS selector matches this element?
    <h2 class="star" id="end">Hello</h2> (a) #end (b) #star (c) .end (d) .menu
23. 23.🎯 What kind of selector is img? (a) an id selector (b) an element selector (c) a class selector
24. 24.Which of these does CSS do? (a) makes headings and lists (b) sets colours and fonts (c) reacts to a button click (d) makes a form box
25. 25.🌈 Which colour is rgb(0, 255, 255)? (a) cyan (b) bright green (c) blue (d) red
26. 26.💪 Which flexbox property picks row or column? (a) justify-content (b) flex-direction (c) display: flex (d) align-items
27. 27.💪 Which flexbox property turns on flexbox? (a) gap (b) align-items (c) justify-content (d) display: flex
28. 28.🧩 Which language adds space around boxes? (a) HTML (b) JavaScript (c) CSS
29. 29.Which of these does HTML do? (a) makes headings and lists (b) adds space around boxes (c) changes the page live (d) shows a pop-up message
30. 30.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the viewport meta tag (c) the hr tag (d) the br tag
31. 31.🖌️ Where does the text sit on its line?
    h1 {
      color: orange;
      font-size: 36px;
      text-align: center;
      background-color: yellow;
    } (a) on the left (b) in the middle (c) on the right
32. 32.🖌️ What colour is behind the letters?
    h1 {
      text-align: right;
      color: purple;
      font-size: 16px;
      background-color: yellow;
    } (a) yellow (b) purple (c) red
33. 33.🎯 Which CSS selector matches this element?
    <h1 class="red" id="top">Hello</h1> (a) h2 (b) #red (c) #top (d) #intro
34. 34.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      width: 300px;
    }
35. 35.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
36. 36.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 270px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 100px wide (no margins).
37. 37.📦 In the box model, which part is a solid or dotted edge? (a) content (b) margin (c) padding (d) border
38. 38.✍️ What is the selector in this CSS rule?
    li {
      padding: 8px;
      color: red;
      background-color: yellow;
    } (a) body (b) padding (c) red (d) li
39. 39.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 18px;
      }
    }
40. 40.Which of these does HTML do? (a) checks a quiz answer (b) rounds box corners (c) adds space around boxes (d) gives the page structure

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