CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 730 · 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 does justify-content: flex-end do? (a) equal gaps, none at ends (b) packs boxes at the start (c) puts boxes in the middle (d) packs boxes at the end
2. 2.⚖️ Which selector is the weakest? (a) an element selector (b) an id selector (c) a class selector
3. 3.🌈 What is the biggest number one colour can have in rgb()? (a) 255 (b) 1000 (c) 99 (d) 100
4. 4.🧩 Which language puts a picture on a page? (a) JavaScript (b) HTML (c) CSS
5. 5.🖌️ Where does the text sit on its line?
   p {
     color: red;
     font-size: 40px;
     background-color: black;
     text-align: left;
   } (a) on the right (b) on the left (c) in the middle
6. 6.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 130px;
     padding: 30px;
     border: 1px solid black;
     margin: 15px;
   }
7. 7.True or false: CSS rounds box corners. (a) True (b) False
8. 8.🎯 Which sign starts a class selector? (a) . (b) @ (c) & (d) #
9. 9.💪 Which flexbox property lines boxes up across? (a) justify-content (b) flex-direction (c) align-items (d) display: flex
10. 10.🖌️ What colour is behind the letters?
    h1 {
      font-size: 16px;
      color: white;
      background-color: yellow;
      text-align: center;
    } (a) red (b) yellow (c) white
11. 11.🖌️ Which CSS property sets the letter colour? (a) text-align (b) font-family (c) color (d) background-color
12. 12.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 50px wide (no margins).
13. 13.📱 What does a media query check? (a) the battery level (b) the time of day (c) the page title (d) the screen width
14. 14.🌈 Which colour is #0000ff? (a) red (b) magenta (c) blue (d) bright green
15. 15.🖌️ Which CSS property centres a heading? (a) background-color (b) color (c) text-align (d) font-size
16. 16.✍️ Which sign ends each CSS declaration? (a) ; (b) : (c) . (d) ,
17. 17.💪 Which justify-content value equal gaps, none at ends? (a) center (b) flex-start (c) flex-end (d) space-between
18. 18.What does font-size do? (a) sets the letter colour (b) makes the text bold (c) makes letters bigger (d) colours behind the text
19. 19.⚖️ What colour is the text of this element?
    <p class="red" id="logo">Hi</p>
    CSS:
    p { color: green; }
    #logo { color: blue; }
    .red { color: white; } (a) white (b) green (c) blue (d) red
20. 20.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 300px;
      padding: 25px;
      border: 1px solid black;
      margin: 15px;
    }
21. 21.What does background-color do? (a) sets the letter colour (b) centres a heading (c) makes the text bold (d) colours behind the text
22. 22.✍️ Which property is set to 20px in this rule?
    h1 {
      font-style: italic;
      font-size: 20px;
      margin: 10px;
      border: 2px solid;
    } (a) background-color (b) text-align (c) 20px (d) font-size
23. 23.What does text-align do? (a) centres a heading (b) sets the letter colour (c) picks the font style (d) makes letters bigger
24. 24.📦 In the box model, which part is space inside the border? (a) border (b) margin (c) content (d) padding
25. 25.✍️ What value is given to text-align in this rule?
    #top {
      margin: 10px;
      text-align: center;
      font-style: italic;
      color: red;
    } (a) 10px (b) center (c) yellow (d) text-align
26. 26.🎯 What kind of selector is p? (a) an id selector (b) a class selector (c) an element selector
27. 27.🖌️ How big is the text, in px?
    li {
      background-color: white;
      text-align: center;
      color: yellow;
      font-size: 28px;
    }
28. 28.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 230px;
      padding: 5px;
      border: 1px solid black;
      margin: 15px;
    }
29. 29.✍️ Which sign goes between a property and its value? (a) : (b) = (c) - (d) ;
30. 30.What does justify-content: space-between do? (a) packs boxes at the end (b) puts boxes in the middle (c) equal gaps, none at ends (d) packs boxes at the start
31. 31.🧩 Which language makes headings and lists? (a) CSS (b) JavaScript (c) HTML
32. 32.True or false: CSS adds space around boxes. (a) False (b) True
33. 33.✍️ What value is given to margin in this rule?
    h2 {
      font-size: 20px;
      margin: 10px;
    } (a) bold (b) 10px (c) 8px (d) margin
34. 34.🌈 Hex digits go 0 to 9, then A to which letter? (a) J (b) G (c) F (d) Z
35. 35.🖌️ Where does the text sit on its line?
    li {
      background-color: black;
      text-align: left;
      color: white;
      font-size: 20px;
    } (a) on the left (b) in the middle (c) on the right
36. 36.Which of these is the content? (a) space outside the border (b) the line round the box (c) the text or picture (d) a solid or dotted edge
37. 37.🎯 Which CSS selector matches this element?
    <p class="note" id="logo">Hello</p> (a) .big (b) #logo (c) .logo (d) #note
38. 38.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    }
39. 39.🎯 Which element does the selector p style? (a) <h2 class="note"> (b) <li id="logo"> (c) <p class="note"> (d) <h1>
40. 40.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 170px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 80px wide (no margins).

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