CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 525 · 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.📱 The screen is 1100px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 14px;
     }
   } (a) No (b) Yes
2. 2.💪 Which justify-content value packs boxes at the end? (a) center (b) flex-start (c) flex-end (d) space-between
3. 3.What does justify-content: center do? (a) puts boxes in the middle (b) packs boxes at the start (c) equal gaps, none at ends (d) packs boxes at the end
4. 4.True or false: p is a class selector. (a) True (b) False
5. 5.🖌️ How big is the text, in px?
   h2 {
     color: green;
     background-color: blue;
     text-align: center;
     font-size: 24px;
   }
6. 6.🎨 What does CSS stand for? (a) Computer Style Sheets (b) Colourful Site Styles (c) Cascading Style Sheets (d) Creative Sheet System
7. 7.🧩 Which language adds space around boxes? (a) HTML (b) CSS (c) JavaScript
8. 8.🌈 Which colour of light is strongest in rgb(128, 86, 160)? (a) red (b) blue (c) green
9. 9.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 10px;
     }
   }
10. 10.🎯 What kind of selector is body? (a) an element selector (b) an id selector (c) a class selector
11. 11.🎯 Which CSS selector matches this element?
    <h1 class="box" id="intro">Hello</h1> (a) h2 (b) .star (c) #intro (d) #main
12. 12.📱 What does a media query check? (a) the page title (b) the time of day (c) the screen width (d) the battery level
13. 13.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
14. 14.⚖️ What colour is the text of this element?
    <p class="menu" id="main">Hi</p>
    CSS:
    p { color: orange; }
    #main { color: blue; }
    .menu { color: green; } (a) orange (b) purple (c) green (d) blue
15. 15.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 26px;
      }
    }
16. 16.🖌️ How big is the text, in px?
    li {
      font-size: 20px;
      background-color: black;
      color: green;
      text-align: left;
    }
17. 17.⚖️ What colour is the text of this element?
    <h2 class="menu" id="intro">Hi</h2>
    CSS:
    h2 { color: black; }
    .menu { color: red; } (a) yellow (b) black (c) white (d) red
18. 18.⚖️ What colour is the text of this element?
    <p class="note" id="intro">Hi</p>
    CSS:
    p { color: green; }
    p { color: blue; } (a) green (b) purple (c) blue (d) white
19. 19.🌈 In #005e00 the green part is the hex number 5e. What is it as a normal number?
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: 280px;
      padding: 5px;
      border: 4px solid black;
      margin: 15px;
    }
21. 21.🌈 Which colour of light is strongest in rgb(47, 138, 238)? (a) red (b) blue (c) green
22. 22.🎨 One CSS file can style how many pages? (a) only one image (b) only one word (c) many pages (d) no pages
23. 23.Which of these is margin? (a) the gap to other boxes (b) the gap round content (c) the text or picture (d) a solid or dotted edge
24. 24.What does font-family do? (a) makes letters bigger (b) colours behind the text (c) makes the text bold (d) picks the font style
25. 25.What does color do? (a) colours behind the text (b) picks the font style (c) sets the letter colour (d) makes letters bigger
26. 26.🌈 Which colour is #ffff00? (a) white (b) magenta (c) yellow (d) blue
27. 27.🖌️ Which CSS property makes letters bigger? (a) font-size (b) font-weight (c) background-color (d) font-family
28. 28.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the first one (c) neither (d) the later one
29. 29.🌈 Which colour is rgb(255, 0, 255)? (a) magenta (b) yellow (c) blue (d) red
30. 30.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 12px;
      }
    }
31. 31.🎯 Which CSS selector matches this element?
    <li class="box" id="logo">Hello</li> (a) .star (b) #end (c) .box (d) div
32. 32.🖌️ Which CSS property colours behind the text? (a) background-color (b) font-weight (c) text-align (d) font-size
33. 33.⚖️ What colour is the text of this element?
    <p class="menu" id="hero">Hi</p>
    CSS:
    p { color: white; }
    .menu { color: black; } (a) purple (b) black (c) white (d) blue
34. 34.True or false: #end is an id selector. (a) False (b) True
35. 35.🌈 Which colour is rgb(0, 0, 0)? (a) white (b) bright green (c) red (d) black
36. 36.🔍 Which is the odd one out? (a) checks a quiz answer (b) changes the page live (c) counts down a timer (d) changes the text size
37. 37.✍️ What value is given to color in this rule?
    #top {
      font-style: italic;
      color: red;
    } (a) center (b) red (c) 20px (d) color
38. 38.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 170px;
      padding: 30px;
      border: 5px solid black;
      margin: 20px;
    }
39. 39.🖌️ What colour is behind the letters?
    h1 {
      text-align: right;
      background-color: yellow;
      font-size: 36px;
      color: green;
    } (a) yellow (b) green (c) white
40. 40.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 170px;
      padding: 15px;
      border: 5px solid black;
      margin: 5px;
    }

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