CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 569 · 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 property is set to italic in this rule?
   p {
     font-style: italic;
     font-size: 20px;
   } (a) font-style (b) italic (c) font-size (d) color
2. 2.⚖️ What colour is the text of this element?
   <h1 class="menu" id="top">Hi</h1>
   CSS:
   h1 { color: white; }
   h1 { color: red; } (a) red (b) blue (c) yellow (d) white
3. 3.🎯 What kind of selector is #logo? (a) an id selector (b) an element selector (c) a class selector
4. 4.✍️ How many declarations (property: value pairs) are in this rule?
   body {
     font-weight: bold;
   }
5. 5.Which of these does CSS do? (a) lays out the page (b) changes the page live (c) checks a quiz answer (d) shows a pop-up message
6. 6.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 22px;
     }
   }
7. 7.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 130px;
     padding: 30px;
     border: 4px solid black;
     margin: 10px;
   }
8. 8.Which of these is margin? (a) space outside the border (b) space inside the border (c) the gap round content (d) the text or picture
9. 9.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 10px;
     }
   }
10. 10.🔍 Which is the odd one out? (a) sets colours and fonts (b) adds space around boxes (c) reacts to a button click (d) rounds box corners
11. 11.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 24px;
      }
    } (a) No (b) Yes
12. 12.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      color: red;
      width: 300px;
      font-size: 20px;
      font-style: italic;
    }
13. 13.📱 Which tag helps phones show a page at the right size? (a) the viewport meta tag (b) the br tag (c) the hr tag (d) the title tag
14. 14.🎯 What kind of selector is body? (a) a class selector (b) an id selector (c) an element selector
15. 15.🎯 Can many elements share the same class? (a) No (b) Yes
16. 16.🌈 In #rrggbb, which colour do the last two digits give? (a) green (b) white (c) blue (d) red
17. 17.True or false: .menu is an element selector. (a) True (b) False
18. 18.🌈 In #00000e the blue part is the hex number 0e. What is it as a normal number?
19. 19.🌈 Which hex code is bright green? (a) #ffff00 (b) #000000 (c) #0000ff (d) #00ff00
20. 20.🌈 In #c50000 the red part is the hex number c5. What is it as a normal number?
21. 21.Which of these is the content? (a) a solid or dotted edge (b) the line round the box (c) the gap round content (d) the text or picture
22. 22.🎯 Which CSS selector matches this element?
    <span class="big" id="hero">Hello</span> (a) p (b) .red (c) span (d) #top
23. 23.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 14px;
      }
    } (a) Yes (b) No
24. 24.✍️ Which sign goes between a property and its value? (a) ; (b) : (c) - (d) =
25. 25.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 30px;
      }
    }
26. 26.📱 What does a media query check? (a) the page title (b) the time of day (c) the battery level (d) the screen width
27. 27.✍️ Which property is set to 2px solid in this rule?
    .note {
      width: 300px;
      font-style: italic;
      border: 2px solid;
      text-align: center;
    } (a) border (b) font-style (c) 2px solid (d) width
28. 28.🧩 Which language lays out the page? (a) HTML (b) CSS (c) JavaScript
29. 29.🌈 Which colour of light is strongest in rgb(54, 240, 104)? (a) red (b) green (c) blue
30. 30.Which of these is padding? (a) space outside the border (b) the line round the box (c) space inside the border (d) the text or picture
31. 31.🎯 What kind of selector is #top? (a) an id selector (b) a class selector (c) an element selector
32. 32.🌈 Which hex code is white? (a) #00ff00 (b) #ffffff (c) #ff00ff (d) #000000
33. 33.⚖️ What colour is the text of this element?
    <h2 class="note" id="end">Hi</h2>
    CSS:
    h2 { color: blue; }
    h2 { color: green; } (a) blue (b) green (c) red (d) black
34. 34.🖌️ Which CSS property colours behind the text? (a) background-color (b) font-weight (c) color (d) font-family
35. 35.⚖️ What colour is the text of this element?
    <h1 class="big" id="intro">Hi</h1>
    CSS:
    .big { color: red; }
    #intro { color: orange; }
    h1 { color: white; } (a) green (b) white (c) orange (d) red
36. 36.✍️ CSS declarations go inside which brackets? (a) ( ) (b) < > (c) [ ] (d) { }
37. 37.True or false: li is an element selector. (a) True (b) False
38. 38.🌈 Which colour of light is strongest in rgb(104, 41, 218)? (a) green (b) red (c) blue
39. 39.🎯 What kind of selector is .big? (a) an element selector (b) an id selector (c) a class selector
40. 40.What does font-family do? (a) sets the letter colour (b) makes letters bigger (c) picks the font style (d) makes the text bold

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