CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 11 · 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 spaces boxes along a row? (a) justify-content (b) align-items (c) display: flex (d) gap
2. 2.🎯 Which element does the selector #logo style? (a) <div class="logo"> (b) <div id="end"> (c) <div id="logo"> (d) <span class="note">
3. 3.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 22px;
     }
   }
4. 4.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) black (c) green (d) red
5. 5.True or false: .menu is a class selector. (a) False (b) True
6. 6.⚖️ What colour is the text of this element?
   <p class="big" id="main">Hi</p>
   CSS:
   .big { color: blue; }
   .big { color: green; } (a) green (b) purple (c) blue (d) red
7. 7.💪 Which flexbox property lines boxes up across? (a) align-items (b) gap (c) display: flex (d) flex-direction
8. 8.✍️ How many declarations (property: value pairs) are in this rule?
   body {
     font-style: italic;
     width: 300px;
   }
9. 9.✍️ How many declarations (property: value pairs) are in this rule?
   h2 {
     color: red;
   }
10. 10.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 6px;
      }
    } (a) Yes (b) No
11. 11.📱 Responsive design means a page ___. (a) fits every screen (b) never changes (c) is only for laptops (d) has no pictures
12. 12.✍️ What value is given to font-style in this rule?
    #top {
      background-color: yellow;
      font-style: italic;
    } (a) 20px (b) italic (c) red (d) font-style
13. 13.Which of these is the content? (a) space inside the border (b) the text or picture (c) the gap to other boxes (d) the line round the box
14. 14.🖌️ Which CSS property makes letters bigger? (a) color (b) text-align (c) font-size (d) background-color
15. 15.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 22px;
      }
    }
16. 16.⚖️ What colour is the text of this element?
    <p class="big" id="logo">Hi</p>
    CSS:
    .big { color: green; }
    p { color: red; }
    #logo { color: blue; } (a) white (b) red (c) green (d) blue
17. 17.🌈 Which colour is rgb(255, 0, 0)? (a) magenta (b) red (c) yellow (d) black
18. 18.💪 Which justify-content value packs boxes at the end? (a) flex-start (b) space-between (c) flex-end (d) center
19. 19.What does font-size do? (a) colours behind the text (b) centres a heading (c) sets the letter colour (d) makes letters bigger
20. 20.🎯 Can many elements share the same class? (a) No (b) Yes
21. 21.🎯 How many elements on a page should have the same id? (a) 5 (b) 2 (c) any number (d) 1
22. 22.🔍 Which is the odd one out? (a) adds space around boxes (b) makes headings and lists (c) rounds box corners (d) changes the text size
23. 23.🎯 Which CSS selector matches this element?
    <li class="box" id="intro">Hello</li> (a) .intro (b) #main (c) div (d) li
24. 24.🎨 Which tag connects an outside CSS file? (a) <css> (b) <link> (c) <a> (d) <img>
25. 25.🎯 Which element does the selector .star style? (a) <p class="note"> (b) <span class="menu"> (c) <span id="star"> (d) <span class="star">
26. 26.✍️ Which sign goes between a property and its value? (a) - (b) : (c) = (d) ;
27. 27.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 260px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 100px wide (no margins).
28. 28.✍️ What is the selector in this CSS rule?
    h2 {
      width: 300px;
      font-weight: bold;
      margin: 10px;
      font-size: 20px;
    } (a) width (b) bold (c) h2 (d) h1
29. 29.💪 Which flexbox property turns on flexbox? (a) align-items (b) justify-content (c) flex-direction (d) display: flex
30. 30.True or false: JavaScript makes a link. (a) True (b) False
31. 31.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      margin: 10px;
      width: 300px;
      font-weight: bold;
      text-align: center;
    }
32. 32.🔍 Which is the odd one out? (a) makes headings and lists (b) adds space around boxes (c) puts a picture on a page (d) makes a form box
33. 33.✍️ What value is given to text-align in this rule?
    h1 {
      font-size: 20px;
      text-align: center;
    } (a) center (b) text-align (c) 10px (d) yellow
34. 34.🎯 What kind of selector is p? (a) a class selector (b) an id selector (c) an element selector
35. 35.⚖️ What colour is the text of this element?
    <h2 class="big" id="top">Hi</h2>
    CSS:
    h2 { color: yellow; }
    h2 { color: white; } (a) green (b) yellow (c) purple (d) white
36. 36.🖌️ Which CSS property sets the letter colour? (a) color (b) text-align (c) font-weight (d) background-color
37. 37.📦 In the box model, which part is the gap to other boxes? (a) content (b) border (c) padding (d) margin
38. 38.🎯 Which CSS selector matches this element?
    <p class="star" id="top">Hello</p> (a) .star (b) #intro (c) #star (d) .top
39. 39.🔍 Which is the odd one out? (a) counts down a timer (b) changes the text size (c) checks a quiz answer (d) shows a pop-up message
40. 40.🔍 Which is the odd one out? (a) sets colours and fonts (b) makes a form box (c) rounds box corners (d) adds space around boxes

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