CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 732 · 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 element does the selector .box style? (a) <h1 class="menu"> (b) <p id="box"> (c) <p class="star"> (d) <p class="box">
2. 2.True or false: .card is a class selector. (a) False (b) True
3. 3.✍️ Which property is set to 10px in this rule?
   #top {
     color: red;
     width: 300px;
     margin: 10px;
   } (a) 10px (b) font-weight (c) padding (d) margin
4. 4.📱 What does a media query check? (a) the screen width (b) the page title (c) the time of day (d) the battery level
5. 5.🎯 Which sign starts a class selector? (a) # (b) . (c) & (d) @
6. 6.🔍 Which is the odd one out? (a) sets colours and fonts (b) checks a quiz answer (c) reacts to a button click (d) counts down a timer
7. 7.⚖️ What colour is the text of this element?
   <p class="note" id="main">Hi</p>
   CSS:
   p { color: green; }
   p { color: black; } (a) blue (b) yellow (c) green (d) black
8. 8.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the hr tag (c) the viewport meta tag (d) the br tag
9. 9.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (min-width: 600px) {
     p {
       font-size: 26px;
     }
   }
10. 10.✍️ Which property is set to 2px solid in this rule?
    li {
      border: 2px solid;
      font-style: italic;
      text-align: center;
      padding: 8px;
    } (a) border (b) width (c) 2px solid (d) font-style
11. 11.🖌️ What colour are the letters?
    h1 {
      background-color: red;
      color: green;
      font-size: 12px;
      text-align: left;
    } (a) green (b) blue (c) red
12. 12.True or false: JavaScript reacts to a button click. (a) False (b) True
13. 13.🌈 What is the biggest number one colour can have in rgb()? (a) 1000 (b) 255 (c) 100 (d) 99
14. 14.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 180px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 80px wide (no margins).
15. 15.Which of these does CSS do? (a) puts a picture on a page (b) changes the page live (c) gives the page structure (d) adds space around boxes
16. 16.🎯 Which sign starts an id selector? (a) @ (b) # (c) . (d) &
17. 17.🎯 Which CSS selector matches this element?
    <li class="menu" id="end">Hello</li> (a) .end (b) .note (c) #menu (d) li
18. 18.🌈 Hex digits go 0 to 9, then A to which letter? (a) J (b) G (c) Z (d) F
19. 19.🖌️ Which CSS property sets the letter colour? (a) font-weight (b) color (c) font-size (d) background-color
20. 20.🖌️ Which CSS property makes letters bigger? (a) font-size (b) text-align (c) background-color (d) color
21. 21.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 20px;
      }
    } (a) No (b) Yes
22. 22.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 40px;
      padding: 25px;
      border: 2px solid black;
      margin: 10px;
    }
23. 23.⚖️ What colour is the text of this element?
    <h2 class="box" id="hero">Hi</h2>
    CSS:
    h2 { color: blue; }
    h2 { color: green; } (a) blue (b) orange (c) green (d) purple
24. 24.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 24px;
      }
    } (a) Yes (b) No
25. 25.🎨 Which tag connects an outside CSS file? (a) <img> (b) <css> (c) <a> (d) <link>
26. 26.Which of these is the content? (a) space outside the border (b) the line round the box (c) the gap round content (d) the text or picture
27. 27.What does background-color do? (a) sets the letter colour (b) makes letters bigger (c) picks the font style (d) colours behind the text
28. 28.True or false: margin is space outside the border. (a) False (b) True
29. 29.✍️ How does a CSS comment start? (a) /* (b) # (c) // (d) <!--
30. 30.🌈 In #4d0000 the red part is the hex number 4d. What is it as a normal number?
31. 31.🎨 Which tag holds CSS inside the head? (a) <style> (b) <css> (c) <body> (d) <script>
32. 32.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) exactly 100px (c) turned off (d) 800px or wider
33. 33.🎯 Which element does the selector .menu style? (a) <h2 class="note"> (b) <h2 class="menu"> (c) <h2 id="menu"> (d) <li class="big">
34. 34.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 130px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 60px wide (no margins).
35. 35.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
36. 36.True or false: the border is the line round the box. (a) False (b) True
37. 37.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 80px;
      padding: 10px;
      border: 5px solid black;
      margin: 5px;
    }
38. 38.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    }
39. 39.🎯 What kind of selector is .star? (a) an element selector (b) an id selector (c) a class selector
40. 40.🎯 Which element does the selector div style? (a) <p class="big"> (b) <span> (c) <h1 id="hero"> (d) <div class="big">

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