CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 300 · 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.✍️ What is the selector in this CSS rule?
   h2 {
     font-size: 20px;
     width: 300px;
   } (a) font-size (b) 300px (c) h2 (d) h1
2. 2.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 140px;
     justify-content: space-between;
   }
   Inside are 2 boxes, each 50px wide (no margins).
3. 3.🎯 What kind of selector is .card? (a) a class selector (b) an element selector (c) an id selector
4. 4.🎯 Which element does the selector #top style? (a) <li id="intro"> (b) <div class="red"> (c) <li class="top"> (d) <li id="top">
5. 5.🖌️ Which CSS property makes the text bold? (a) color (b) background-color (c) font-family (d) font-weight
6. 6.📱 Responsive design means a page ___. (a) has no pictures (b) is only for laptops (c) never changes (d) fits every screen
7. 7.Which of these is padding? (a) the gap round content (b) the text or picture (c) the gap to other boxes (d) space outside the border
8. 8.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 4 (b) 6 (c) 2 (d) 3
9. 9.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 12px;
     }
   }
10. 10.✍️ What is the selector in this CSS rule?
    .box {
      padding: 8px;
      background-color: yellow;
      font-size: 20px;
      border: 2px solid;
    } (a) yellow (b) padding (c) h2 (d) .box
11. 11.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      font-weight: bold;
      color: red;
    }
12. 12.Which of these does JavaScript do? (a) counts down a timer (b) puts a picture on a page (c) makes headings and lists (d) rounds box corners
13. 13.🌈 Which colour of light is strongest in rgb(69, 206, 73)? (a) green (b) red (c) blue
14. 14.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
15. 15.🎯 Which sign starts an id selector? (a) . (b) @ (c) & (d) #
16. 16.Which of these does JavaScript do? (a) makes headings and lists (b) sets colours and fonts (c) makes a link (d) shows a pop-up message
17. 17.📦 In the box model, which part is the line round the box? (a) margin (b) padding (c) content (d) border
18. 18.🎨 Which tag connects an outside CSS file? (a) <a> (b) <link> (c) <css> (d) <img>
19. 19.🎯 Which element does the selector #end style? (a) <li class="end"> (b) <div class="menu"> (c) <li id="hero"> (d) <li id="end">
20. 20.⚖️ What colour is the text of this element?
    <p class="big" id="end">Hi</p>
    CSS:
    p { color: red; }
    p { color: yellow; } (a) purple (b) green (c) red (d) yellow
21. 21.⚖️ What colour is the text of this element?
    <p class="big" id="hero">Hi</p>
    CSS:
    #hero { color: blue; }
    #hero { color: orange; } (a) blue (b) orange (c) purple (d) yellow
22. 22.What does justify-content: space-between do? (a) packs boxes at the start (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the end
23. 23.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the viewport meta tag (c) the br tag (d) the hr tag
24. 24.✍️ In color: blue; which part is the property? (a) ; (b) : (c) color (d) blue
25. 25.📱 What does a media query check? (a) the page title (b) the battery level (c) the time of day (d) the screen width
26. 26.Which of these does JavaScript do? (a) adds space around boxes (b) puts a picture on a page (c) changes the text size (d) checks a quiz answer
27. 27.Which of these is margin? (a) the gap round content (b) space outside the border (c) the text or picture (d) a solid or dotted edge
28. 28.⚖️ What colour is the text of this element?
    <p class="big" id="main">Hi</p>
    CSS:
    p { color: yellow; }
    .big { color: black; }
    #main { color: red; } (a) black (b) red (c) yellow (d) green
29. 29.True or false: img is an element selector. (a) False (b) True
30. 30.✍️ What is the selector in this CSS rule?
    h1 {
      width: 300px;
      font-weight: bold;
      font-size: 20px;
    } (a) p (b) width (c) bold (d) h1
31. 31.🎨 What does CSS stand for? (a) Computer Style Sheets (b) Cascading Style Sheets (c) Creative Sheet System (d) Colourful Site Styles
32. 32.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 14px;
      }
    }
33. 33.🎯 Which sign starts a class selector? (a) & (b) @ (c) # (d) .
34. 34.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 24px;
      }
    }
35. 35.🌈 Which colour is #00ffff? (a) red (b) cyan (c) yellow (d) magenta
36. 36.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 130px;
      padding: 20px;
      border: 5px solid black;
      margin: 0px;
    }
37. 37.🌈 What is the biggest number one colour can have in rgb()? (a) 1000 (b) 99 (c) 100 (d) 255
38. 38.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 6px;
      }
    } (a) No (b) Yes
39. 39.✍️ Which property is set to center in this rule?
    h1 {
      text-align: center;
      font-size: 20px;
    } (a) center (b) background-color (c) text-align (d) margin
40. 40.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    } (a) No (b) Yes

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