CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 625 · 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.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) blue (c) black (d) red
2. 2.🎯 Which sign starts an id selector? (a) . (b) & (c) # (d) @
3. 3.🔍 Which is the odd one out? (a) adds space around boxes (b) gives the page structure (c) sets colours and fonts (d) lays out the page
4. 4.✍️ What is the selector in this CSS rule?
   p {
     font-size: 20px;
     width: 300px;
     border: 2px solid;
     margin: 10px;
   } (a) font-size (b) p (c) 300px (d) .note
5. 5.✍️ Which property is set to 10px in this rule?
   body {
     background-color: yellow;
     margin: 10px;
     text-align: center;
     font-weight: bold;
   } (a) 10px (b) padding (c) font-weight (d) margin
6. 6.What does color do? (a) centres a heading (b) picks the font style (c) sets the letter colour (d) makes letters bigger
7. 7.⚖️ Which selector is the strongest? (a) an id selector (b) a class selector (c) an element selector
8. 8.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 160px;
     justify-content: flex-end;
   }
   Inside are 2 boxes, each 50px wide (no margins).
9. 9.🖌️ What colour are the letters?
   li {
     font-size: 24px;
     text-align: left;
     background-color: blue;
     color: purple;
   } (a) red (b) purple (c) blue
10. 10.🎯 What kind of selector is #main? (a) a class selector (b) an element selector (c) an id selector
11. 11.⚖️ What colour is the text of this element?
    <h2 class="note" id="logo">Hi</h2>
    CSS:
    h2 { color: blue; }
    .note { color: white; } (a) green (b) white (c) red (d) blue
12. 12.💪 Which flexbox property sets space between boxes? (a) justify-content (b) align-items (c) flex-direction (d) gap
13. 13.✍️ What value is given to color in this rule?
    .note {
      margin: 10px;
      color: red;
    } (a) 20px (b) center (c) red (d) color
14. 14.🎯 Which CSS selector matches this element?
    <li class="menu" id="hero">Hello</li> (a) .hero (b) #menu (c) #top (d) li
15. 15.⚖️ What colour is the text of this element?
    <p class="red" id="end">Hi</p>
    CSS:
    .red { color: white; }
    p { color: orange; } (a) red (b) orange (c) yellow (d) white
16. 16.Which of these is padding? (a) the text or picture (b) space outside the border (c) the gap to other boxes (d) space inside the border
17. 17.🌈 What is the biggest number one colour can have in rgb()? (a) 1000 (b) 100 (c) 255 (d) 99
18. 18.🌈 Which colour is rgb(0, 255, 0)? (a) bright green (b) black (c) yellow (d) white
19. 19.🎨 One CSS file can style how many pages? (a) only one word (b) no pages (c) only one image (d) many pages
20. 20.🎯 How many elements on a page should have the same id? (a) 2 (b) 1 (c) any number (d) 5
21. 21.What does justify-content: center do? (a) puts boxes in the middle (b) packs boxes at the end (c) packs boxes at the start (d) equal gaps, none at ends
22. 22.Which of these does CSS do? (a) sets colours and fonts (b) puts a picture on a page (c) makes headings and lists (d) gives the page structure
23. 23.🌈 Which colour is #ffff00? (a) magenta (b) yellow (c) cyan (d) bright green
24. 24.✍️ Which property is set to red in this rule?
    .note {
      color: red;
      background-color: yellow;
      padding: 8px;
    } (a) red (b) color (c) font-size (d) text-align
25. 25.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 26px;
      }
    } (a) Yes (b) No
26. 26.🖌️ Which CSS property centres a heading? (a) color (b) font-weight (c) text-align (d) font-family
27. 27.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 6px;
      }
    } (a) Yes (b) No
28. 28.✍️ Which sign ends each CSS declaration? (a) ; (b) . (c) , (d) :
29. 29.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 28px;
      }
    }
30. 30.True or false: body is an id selector. (a) True (b) False
31. 31.🎯 Which element does the selector #main style? (a) <h1 class="main"> (b) <h1 id="logo"> (c) <h1 id="main"> (d) <h2 class="star">
32. 32.True or false: CSS lays out the page. (a) False (b) True
33. 33.⚖️ What colour is the text of this element?
    <h2 class="red" id="top">Hi</h2>
    CSS:
    h2 { color: yellow; }
    h2 { color: blue; } (a) orange (b) red (c) blue (d) yellow
34. 34.✍️ Which sign goes between a property and its value? (a) - (b) ; (c) : (d) =
35. 35.📦 In the box model, which part is space outside the border? (a) content (b) margin (c) padding (d) border
36. 36.🌈 Which colour of light is strongest in rgb(1, 9, 208)? (a) red (b) green (c) blue
37. 37.🖌️ What colour is behind the letters?
    p {
      background-color: green;
      font-size: 40px;
      text-align: center;
      color: purple;
    } (a) blue (b) purple (c) green
38. 38.✍️ Which property is set to bold in this rule?
    body {
      font-weight: bold;
      color: red;
      background-color: yellow;
    } (a) font-weight (b) bold (c) border (d) width
39. 39.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 120px;
      padding: 30px;
      border: 2px solid black;
      margin: 5px;
    }
40. 40.🎨 Which tag holds CSS inside the head? (a) <script> (b) <body> (c) <css> (d) <style>

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