CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 174 · 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.🖌️ Where does the text sit on its line?
   p {
     color: black;
     background-color: red;
     text-align: right;
     font-size: 28px;
   } (a) on the right (b) on the left (c) in the middle
2. 2.What does font-weight do? (a) colours behind the text (b) picks the font style (c) makes the text bold (d) sets the letter colour
3. 3.Which of these is padding? (a) the text or picture (b) space inside the border (c) the line round the box (d) the gap to other boxes
4. 4.🎯 Which element does the selector #logo style? (a) <h2 id="end"> (b) <li class="box"> (c) <h2 class="logo"> (d) <h2 id="logo">
5. 5.🎯 Which CSS selector matches this element?
   <span class="menu" id="top">Hello</span> (a) .note (b) p (c) span (d) #intro
6. 6.🌈 Which colour is #ff0000? (a) cyan (b) black (c) white (d) red
7. 7.🎯 Which element does the selector span style? (a) <p> (b) <h2 id="top"> (c) <h1 class="menu"> (d) <span class="menu">
8. 8.True or false: CSS gives the page structure. (a) False (b) True
9. 9.🔍 Which is the odd one out? (a) puts a picture on a page (b) makes a link (c) sets colours and fonts (d) makes a form box
10. 10.What does justify-content: flex-start 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
11. 11.⚖️ What colour is the text of this element?
    <h1 class="big" id="end">Hi</h1>
    CSS:
    .big { color: yellow; }
    h1 { color: black; }
    #end { color: purple; } (a) red (b) yellow (c) black (d) purple
12. 12.🖌️ Which CSS property colours behind the text? (a) color (b) background-color (c) font-family (d) text-align
13. 13.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 28px;
      }
    }
14. 14.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 50px;
      padding: 25px;
      border: 4px solid black;
      margin: 0px;
    }
15. 15.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 80px;
      padding: 10px;
      border: 5px solid black;
      margin: 10px;
    }
16. 16.✍️ What is the selector in this CSS rule?
    p {
      font-size: 20px;
      text-align: center;
      padding: 8px;
      font-weight: bold;
    } (a) center (b) p (c) font-size (d) .note
17. 17.✍️ What is the selector in this CSS rule?
    li {
      border: 2px solid;
      text-align: center;
    } (a) center (b) border (c) li (d) body
18. 18.🌈 Which hex code is red? (a) #ff0000 (b) #00ffff (c) #0000ff (d) #000000
19. 19.🎯 Which sign starts an id selector? (a) # (b) . (c) @ (d) &
20. 20.✍️ CSS declarations go inside which brackets? (a) ( ) (b) < > (c) [ ] (d) { }
21. 21.✍️ What is the selector in this CSS rule?
    body {
      font-style: italic;
      color: red;
      font-size: 20px;
      text-align: center;
    } (a) body (b) .box (c) red (d) font-style
22. 22.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 310px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 80px wide (no margins).
23. 23.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 20px;
      }
    } (a) No (b) Yes
24. 24.🎯 Which element does the selector span style? (a) <span class="star"> (b) <p> (c) <h2 id="logo"> (d) <h1 class="star">
25. 25.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 28px;
      }
    } (a) Yes (b) No
26. 26.What does background-color do? (a) makes letters bigger (b) centres a heading (c) sets the letter colour (d) colours behind the text
27. 27.What does text-align do? (a) centres a heading (b) picks the font style (c) sets the letter colour (d) makes letters bigger
28. 28.📦 In the box model, which part is the text or picture? (a) border (b) margin (c) padding (d) content
29. 29.⚖️ What colour is the text of this element?
    <p class="note" id="top">Hi</p>
    CSS:
    p { color: yellow; }
    #top { color: red; } (a) orange (b) blue (c) yellow (d) red
30. 30.🎯 Which CSS selector matches this element?
    <h2 class="note" id="top">Hello</h2> (a) #note (b) #top (c) .top (d) .big
31. 31.🎯 How many elements on a page should have the same id? (a) 1 (b) 2 (c) 5 (d) any number
32. 32.🎯 What kind of selector is .note? (a) an element selector (b) an id selector (c) a class selector
33. 33.🎯 What kind of selector is .star? (a) a class selector (b) an id selector (c) an element selector
34. 34.🖌️ What colour are the letters?
    p {
      text-align: left;
      background-color: white;
      font-size: 20px;
      color: red;
    } (a) orange (b) white (c) red
35. 35.🎯 What kind of selector is img? (a) an element selector (b) a class selector (c) an id selector
36. 36.⚖️ What colour is the text of this element?
    <p class="big" id="logo">Hi</p>
    CSS:
    p { color: red; }
    p { color: yellow; } (a) purple (b) white (c) yellow (d) red
37. 37.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 22px;
      }
    } (a) Yes (b) No
38. 38.🎨 Which attribute adds CSS inside one tag? (a) alt (b) style (c) src (d) href
39. 39.🎯 What kind of selector is #top? (a) an element selector (b) a class selector (c) an id selector
40. 40.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector

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