CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 336 · 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.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 160px;
     justify-content: center;
   }
   Inside are 2 boxes, each 50px wide (no margins).
2. 2.✍️ In color: blue; which part is the property? (a) blue (b) ; (c) : (d) color
3. 3.True or false: HTML makes a form box. (a) False (b) True
4. 4.🎯 What kind of selector is .card? (a) an element selector (b) an id selector (c) a class selector
5. 5.🖌️ How big is the text, in px?
   li {
     color: white;
     text-align: left;
     background-color: orange;
     font-size: 28px;
   }
6. 6.🌈 In #a40000 the red part is the hex number a4. What is it as a normal number?
7. 7.Which of these does HTML do? (a) counts down a timer (b) checks a quiz answer (c) puts a picture on a page (d) shows a pop-up message
8. 8.✍️ What is the selector in this CSS rule?
   li {
     width: 300px;
     padding: 8px;
     font-style: italic;
   } (a) li (b) width (c) 8px (d) body
9. 9.💪 Which justify-content value puts boxes in the middle? (a) flex-end (b) flex-start (c) space-between (d) center
10. 10.⚖️ What colour is the text of this element?
    <h2 class="note" id="hero">Hi</h2>
    CSS:
    h2 { color: yellow; }
    h2 { color: green; } (a) white (b) yellow (c) red (d) green
11. 11.🔍 Which is the odd one out? (a) lays out the page (b) adds space around boxes (c) rounds box corners (d) puts a picture on a page
12. 12.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 100px;
      padding: 15px;
      border: 3px solid black;
      margin: 5px;
    }
13. 13.🎯 Which CSS selector matches this element?
    <h2 class="note" id="top">Hello</h2> (a) li (b) .note (c) #note (d) .top
14. 14.🎯 Which sign starts an id selector? (a) . (b) # (c) @ (d) &
15. 15.🖌️ What colour are the letters?
    p {
      text-align: left;
      font-size: 28px;
      color: red;
      background-color: blue;
    } (a) black (b) red (c) blue
16. 16.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 30px;
      }
    } (a) No (b) Yes
17. 17.✍️ Which property is set to 300px in this rule?
    h1 {
      font-weight: bold;
      border: 2px solid;
      width: 300px;
    } (a) width (b) font-style (c) color (d) 300px
18. 18.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      font-style: italic;
      border: 2px solid;
    }
19. 19.What does font-family do? (a) picks the font style (b) centres a heading (c) makes the text bold (d) colours behind the text
20. 20.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 28px;
      }
    }
21. 21.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 14px;
      }
    } (a) No (b) Yes
22. 22.🎯 Which sign starts a class selector? (a) . (b) @ (c) # (d) &
23. 23.🔍 Which is the odd one out? (a) sets colours and fonts (b) lays out the page (c) rounds box corners (d) changes the page live
24. 24.True or false: the content is the line round the box. (a) True (b) False
25. 25.✍️ Which property is set to bold in this rule?
    h2 {
      background-color: yellow;
      font-weight: bold;
      color: red;
      font-size: 20px;
    } (a) width (b) bold (c) border (d) font-weight
26. 26.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 170px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 60px wide (no margins).
27. 27.📦 In the box model, which part is a solid or dotted edge? (a) content (b) padding (c) border (d) margin
28. 28.✍️ CSS declarations go inside which brackets? (a) [ ] (b) < > (c) { } (d) ( )
29. 29.🎯 Which CSS selector matches this element?
    <span class="box" id="hero">Hello</span> (a) p (b) .star (c) .box (d) #top
30. 30.🖌️ Which CSS property centres a heading? (a) font-family (b) background-color (c) text-align (d) color
31. 31.🖌️ Where does the text sit on its line?
    li {
      text-align: center;
      color: yellow;
      font-size: 12px;
      background-color: white;
    } (a) in the middle (b) on the right (c) on the left
32. 32.🎯 Which CSS selector matches this element?
    <p class="box" id="intro">Hello</p> (a) #main (b) #intro (c) #box (d) h1
33. 33.🌈 Which colour of light is strongest in rgb(116, 244, 105)? (a) blue (b) red (c) green
34. 34.🎯 Which CSS selector matches this element?
    <div class="menu" id="top">Hello</div> (a) div (b) #menu (c) .top (d) #intro
35. 35.📱 What does a media query check? (a) the page title (b) the time of day (c) the battery level (d) the screen width
36. 36.Which of these does JavaScript do? (a) makes headings and lists (b) adds space around boxes (c) checks a quiz answer (d) lays out the page
37. 37.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 150px;
      padding: 5px;
      border: 5px solid black;
      margin: 10px;
    }
38. 38.🧩 Which language adds space around boxes? (a) JavaScript (b) HTML (c) CSS
39. 39.🎯 Which CSS selector matches this element?
    <li class="star" id="hero">Hello</li> (a) .hero (b) li (c) #top (d) .menu
40. 40.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 90px;
      padding: 20px;
      border: 1px solid black;
      margin: 0px;
    }

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