CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 23 · 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.True or false: .menu is a class selector. (a) False (b) True
2. 2.🖌️ How big is the text, in px?
   h1 {
     font-size: 28px;
     color: purple;
     background-color: white;
     text-align: left;
   }
3. 3.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
4. 4.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 4 (b) 2 (c) 6 (d) 3
5. 5.🎨 Which tag connects an outside CSS file? (a) <css> (b) <link> (c) <a> (d) <img>
6. 6.Which of these does JavaScript do? (a) gives the page structure (b) adds space around boxes (c) makes headings and lists (d) shows a pop-up message
7. 7.🎯 What kind of selector is .big? (a) an element selector (b) an id selector (c) a class selector
8. 8.⚖️ What colour is the text of this element?
   <h1 class="red" id="intro">Hi</h1>
   CSS:
   #intro { color: black; }
   h1 { color: white; }
   .red { color: green; } (a) green (b) white (c) black (d) orange
9. 9.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) red (c) black (d) blue
10. 10.⚖️ What colour is the text of this element?
    <h1 class="big" id="main">Hi</h1>
    CSS:
    h1 { color: blue; }
    .big { color: white; }
    #main { color: black; } (a) green (b) black (c) blue (d) white
11. 11.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    } (a) Yes (b) No
12. 12.🖌️ How big is the text, in px?
    h2 {
      color: purple;
      text-align: right;
      font-size: 36px;
      background-color: blue;
    }
13. 13.What does font-family do? (a) makes the text bold (b) picks the font style (c) makes letters bigger (d) colours behind the text
14. 14.✍️ CSS declarations go inside which brackets? (a) { } (b) [ ] (c) ( ) (d) < >
15. 15.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 20px;
      }
    } (a) No (b) Yes
16. 16.True or false: HTML makes a form box. (a) True (b) False
17. 17.💪 Which flexbox property spaces boxes along a row? (a) align-items (b) display: flex (c) justify-content (d) flex-direction
18. 18.🖌️ Which CSS property colours behind the text? (a) font-weight (b) color (c) font-family (d) background-color
19. 19.True or false: #top is a class selector. (a) False (b) True
20. 20.🎯 Which element does the selector #main style? (a) <h2 id="logo"> (b) <li class="note"> (c) <h2 class="main"> (d) <h2 id="main">
21. 21.🎯 What kind of selector is img? (a) an id selector (b) a class selector (c) an element selector
22. 22.⚖️ Which selector is the strongest? (a) an element selector (b) an id selector (c) a class selector
23. 23.✍️ In color: blue; which part is the value? (a) : (b) blue (c) color (d) ;
24. 24.🖌️ What colour are the letters?
    li {
      background-color: white;
      text-align: center;
      color: red;
      font-size: 24px;
    } (a) red (b) white (c) black
25. 25.🎯 Which CSS selector matches this element?
    <span class="menu" id="top">Hello</span> (a) .top (b) .note (c) #menu (d) .menu
26. 26.What does color do? (a) centres a heading (b) colours behind the text (c) sets the letter colour (d) makes the text bold
27. 27.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
28. 28.🌈 Which colour of light is strongest in rgb(106, 231, 29)? (a) blue (b) green (c) red
29. 29.🧩 Which language checks a quiz answer? (a) JavaScript (b) CSS (c) HTML
30. 30.🌈 Which colour of light is strongest in rgb(218, 80, 44)? (a) blue (b) red (c) green
31. 31.⚖️ What colour is the text of this element?
    <h1 class="red" id="main">Hi</h1>
    CSS:
    h1 { color: purple; }
    #main { color: orange; } (a) black (b) blue (c) orange (d) purple
32. 32.🎯 Which sign starts an id selector? (a) & (b) @ (c) . (d) #
33. 33.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 170px;
      padding: 15px;
      border: 4px solid black;
      margin: 0px;
    }
34. 34.Which of these does HTML do? (a) checks a quiz answer (b) counts down a timer (c) rounds box corners (d) makes headings and lists
35. 35.✍️ Which property is set to italic in this rule?
    p {
      text-align: center;
      font-style: italic;
    } (a) font-size (b) color (c) font-style (d) italic
36. 36.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 22px;
      }
    } (a) No (b) Yes
37. 37.💪 Which justify-content value packs boxes at the end? (a) center (b) space-between (c) flex-end (d) flex-start
38. 38.✍️ What is the selector in this CSS rule?
    #top {
      width: 300px;
      font-weight: bold;
      color: red;
      text-align: center;
    } (a) bold (b) width (c) #top (d) li
39. 39.🌈 In #rrggbb, which colour do the last two digits give? (a) blue (b) green (c) white (d) red
40. 40.Which of these is margin? (a) the line round the box (b) space outside the border (c) the gap round content (d) the text or picture

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