CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 738 · 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: 400px;
     justify-content: center;
   }
   Inside are 4 boxes, each 80px wide (no margins).
2. 2.True or false: margin is space inside the border. (a) False (b) True
3. 3.🖌️ How big is the text, in px?
   h1 {
     text-align: center;
     font-size: 40px;
     color: red;
     background-color: black;
   }
4. 4.🧩 Which language makes headings and lists? (a) CSS (b) JavaScript (c) HTML
5. 5.Which of these is the content? (a) the gap to other boxes (b) space outside the border (c) the text or picture (d) space inside the border
6. 6.True or false: HTML makes a form box. (a) False (b) True
7. 7.🎯 Which element does the selector .star style? (a) <li class="menu"> (b) <li id="star"> (c) <div class="note"> (d) <li class="star">
8. 8.📱 Responsive design means a page ___. (a) is only for laptops (b) fits every screen (c) never changes (d) has no pictures
9. 9.🌈 Which colour is rgb(0, 0, 0)? (a) magenta (b) red (c) black (d) blue
10. 10.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) flex-end (c) space-between (d) center
11. 11.What does color do? (a) makes the text bold (b) centres a heading (c) sets the letter colour (d) picks the font style
12. 12.🔍 Which is the odd one out? (a) reacts to a button click (b) counts down a timer (c) shows a pop-up message (d) lays out the page
13. 13.🔍 Which is the odd one out? (a) sets colours and fonts (b) changes the page live (c) reacts to a button click (d) checks a quiz answer
14. 14.⚖️ What colour is the text of this element?
    <h1 class="big" id="top">Hi</h1>
    CSS:
    h1 { color: black; }
    #top { color: purple; }
    .big { color: red; } (a) red (b) black (c) purple (d) yellow
15. 15.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      font-size: 20px;
    }
16. 16.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 8px;
      }
    }
17. 17.Which of these does CSS do? (a) changes the page live (b) lays out the page (c) gives the page structure (d) counts down a timer
18. 18.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 140px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 40px wide (no margins).
19. 19.✍️ How does a CSS comment start? (a) <!-- (b) // (c) # (d) /*
20. 20.True or false: CSS adds space around boxes. (a) False (b) True
21. 21.🎯 What kind of selector is h1? (a) an id selector (b) a class selector (c) an element selector
22. 22.What does justify-content: flex-end do? (a) packs boxes at the start (b) packs boxes at the end (c) puts boxes in the middle (d) equal gaps, none at ends
23. 23.🌈 Which hex code is cyan? (a) #00ff00 (b) #00ffff (c) #0000ff (d) #ffffff
24. 24.🎯 Which sign starts an id selector? (a) @ (b) & (c) . (d) #
25. 25.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 30px;
      }
    }
26. 26.🖌️ What colour is behind the letters?
    h1 {
      text-align: right;
      color: black;
      font-size: 36px;
      background-color: yellow;
    } (a) black (b) yellow (c) purple
27. 27.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
28. 28.🖌️ Which CSS property sets the letter colour? (a) text-align (b) background-color (c) color (d) font-size
29. 29.⚖️ Which selector is the weakest? (a) an id selector (b) an element selector (c) a class selector
30. 30.🌈 Which colour is #ff0000? (a) red (b) bright green (c) blue (d) white
31. 31.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      font-weight: bold;
      margin: 10px;
      width: 300px;
    }
32. 32.✍️ Which property is set to bold in this rule?
    h2 {
      font-weight: bold;
      background-color: yellow;
    } (a) border (b) bold (c) font-weight (d) width
33. 33.🎯 What kind of selector is #end? (a) an id selector (b) a class selector (c) an element selector
34. 34.🖌️ How big is the text, in px?
    p {
      color: green;
      background-color: purple;
      font-size: 16px;
      text-align: right;
    }
35. 35.⚖️ What colour is the text of this element?
    <h2 class="menu" id="top">Hi</h2>
    CSS:
    .menu { color: red; }
    .menu { color: purple; } (a) purple (b) red (c) blue (d) yellow
36. 36.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) blue (c) green (d) black
37. 37.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 220px;
      padding: 5px;
      border: 5px solid black;
      margin: 0px;
    }
38. 38.🎨 Which tag connects an outside CSS file? (a) <link> (b) <img> (c) <a> (d) <css>
39. 39.Which of these does CSS do? (a) puts a picture on a page (b) makes a link (c) counts down a timer (d) sets colours and fonts
40. 40.True or false: JavaScript makes headings and lists. (a) False (b) True

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