CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 176 · 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 flexbox property turns on flexbox? (a) justify-content (b) flex-direction (c) align-items (d) display: flex
2. 2.🌈 What is the biggest number one colour can have in rgb()? (a) 99 (b) 255 (c) 1000 (d) 100
3. 3.True or false: margin is space outside the border. (a) False (b) True
4. 4.🌈 Which colour is rgb(255, 255, 0)? (a) blue (b) magenta (c) cyan (d) yellow
5. 5.✍️ CSS declarations go inside which brackets? (a) [ ] (b) ( ) (c) < > (d) { }
6. 6.✍️ How many declarations (property: value pairs) are in this rule?
   li {
     width: 300px;
   }
7. 7.🧩 Which language counts down a timer? (a) HTML (b) JavaScript (c) CSS
8. 8.🎯 What kind of selector is body? (a) a class selector (b) an id selector (c) an element selector
9. 9.🧩 Which language changes the page live? (a) HTML (b) CSS (c) JavaScript
10. 10.⚖️ What colour is the text of this element?
    <p class="menu" id="hero">Hi</p>
    CSS:
    .menu { color: black; }
    p { color: blue; } (a) blue (b) purple (c) red (d) black
11. 11.📱 What does a media query check? (a) the screen width (b) the time of day (c) the battery level (d) the page title
12. 12.🎯 Which sign starts an id selector? (a) . (b) @ (c) & (d) #
13. 13.🌈 Which colour is #ffffff? (a) white (b) blue (c) bright green (d) yellow
14. 14.🖌️ Which CSS property centres a heading? (a) background-color (b) text-align (c) color (d) font-size
15. 15.📦 In the box model, which part is a solid or dotted edge? (a) margin (b) padding (c) border (d) content
16. 16.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 30px;
      }
    }
17. 17.💪 Which flexbox property lines boxes up across? (a) flex-direction (b) display: flex (c) justify-content (d) align-items
18. 18.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 18px;
      }
    }
19. 19.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 22px;
      }
    }
20. 20.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 190px;
      padding: 5px;
      border: 1px solid black;
      margin: 15px;
    }
21. 21.💪 Which flexbox property picks row or column? (a) justify-content (b) flex-direction (c) align-items (d) display: flex
22. 22.Which of these does CSS do? (a) gives the page structure (b) checks a quiz answer (c) makes headings and lists (d) changes the text size
23. 23.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 22px;
      }
    }
24. 24.✍️ Which sign goes between a property and its value? (a) - (b) ; (c) = (d) :
25. 25.Which of these does CSS do? (a) makes a link (b) puts a picture on a page (c) lays out the page (d) counts down a timer
26. 26.What does justify-content: flex-start do? (a) packs boxes at the start (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the end
27. 27.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 120px;
      padding: 30px;
      border: 1px solid black;
      margin: 20px;
    }
28. 28.🎯 Which CSS selector matches this element?
    <h1 class="star" id="top">Hello</h1> (a) h1 (b) .top (c) h2 (d) .menu
29. 29.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 18px;
      }
    }
30. 30.Which of these does HTML do? (a) counts down a timer (b) lays out the page (c) adds space around boxes (d) makes a form box
31. 31.💪 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).
32. 32.✍️ What is the selector in this CSS rule?
    li {
      padding: 8px;
      color: red;
    } (a) padding (b) body (c) red (d) li
33. 33.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 340px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 100px wide (no margins).
34. 34.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) flex-end (c) space-between (d) center
35. 35.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      font-size: 20px;
    }
36. 36.True or false: JavaScript changes the page live. (a) False (b) True
37. 37.🧩 Which language makes headings and lists? (a) HTML (b) CSS (c) JavaScript
38. 38.Which of these is the border? (a) the gap to other boxes (b) the line round the box (c) space inside the border (d) the gap round content
39. 39.🌈 Which colour of light is strongest in rgb(15, 206, 17)? (a) red (b) green (c) blue
40. 40.🌈 Which colour of light is strongest in rgb(20, 80, 185)? (a) green (b) blue (c) red

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