CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 982 · 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.🧩 Which language makes headings and lists? (a) CSS (b) HTML (c) JavaScript
2. 2.🌈 Which colour of light is strongest in rgb(248, 96, 0)? (a) red (b) blue (c) green
3. 3.📱 Responsive design means a page ___. (a) never changes (b) is only for laptops (c) fits every screen (d) has no pictures
4. 4.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 290px;
     justify-content: flex-start;
   }
   Inside are 4 boxes, each 60px wide (no margins).
5. 5.🎨 Which tag connects an outside CSS file? (a) <css> (b) <img> (c) <a> (d) <link>
6. 6.🌈 In #rrggbb, which colour do the first two digits give? (a) black (b) blue (c) red (d) green
7. 7.🌈 Which colour of light is strongest in rgb(57, 127, 223)? (a) blue (b) green (c) red
8. 8.✍️ How many declarations (property: value pairs) are in this rule?
   .note {
     font-weight: bold;
   }
9. 9.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 28px;
     }
   }
10. 10.🌈 Which hex code is cyan? (a) #0000ff (b) #00ffff (c) #00ff00 (d) #ff0000
11. 11.Which of these is the content? (a) space inside the border (b) the gap to other boxes (c) the gap round content (d) the text or picture
12. 12.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
13. 13.⚖️ Which selector is the strongest? (a) an id selector (b) a class selector (c) an element selector
14. 14.🎯 What kind of selector is .big? (a) an element selector (b) an id selector (c) a class selector
15. 15.🎯 Which CSS selector matches this element?
    <li class="star" id="top">Hello</li> (a) .menu (b) .top (c) #intro (d) #top
16. 16.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 100px;
      padding: 5px;
      border: 5px solid black;
      margin: 5px;
    }
17. 17.🎨 One CSS file can style how many pages? (a) only one image (b) no pages (c) only one word (d) many pages
18. 18.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 8px;
      }
    }
19. 19.⚖️ What colour is the text of this element?
    <p class="menu" id="top">Hi</p>
    CSS:
    #top { color: red; }
    .menu { color: green; }
    p { color: white; } (a) red (b) blue (c) green (d) white
20. 20.🎯 Which element does the selector #hero style? (a) <div class="star"> (b) <li id="top"> (c) <li class="hero"> (d) <li id="hero">
21. 21.💪 Which flexbox property picks row or column? (a) align-items (b) display: flex (c) justify-content (d) flex-direction
22. 22.✍️ What value is given to border in this rule?
    .note {
      width: 300px;
      border: 2px solid;
      font-style: italic;
    } (a) 300px (b) border (c) italic (d) 2px solid
23. 23.🎯 Which element does the selector .note style? (a) <h1 class="note"> (b) <h1 id="note"> (c) <h1 class="big"> (d) <h2 class="red">
24. 24.Which of these is padding? (a) space outside the border (b) the line round the box (c) the gap round content (d) the gap to other boxes
25. 25.🌈 In #0000a9 the blue part is the hex number a9. What is it as a normal number?
26. 26.🖌️ How big is the text, in px?
    h1 {
      background-color: blue;
      font-size: 40px;
      color: white;
      text-align: left;
    }
27. 27.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      border: 2px solid;
      color: red;
      font-weight: bold;
    }
28. 28.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 28px;
      }
    } (a) Yes (b) No
29. 29.⚖️ What colour is the text of this element?
    <p class="big" id="logo">Hi</p>
    CSS:
    .big { color: red; }
    #logo { color: blue; }
    p { color: orange; } (a) red (b) purple (c) orange (d) blue
30. 30.💪 Which justify-content value packs boxes at the end? (a) flex-start (b) flex-end (c) space-between (d) center
31. 31.True or false: the border is space inside the border. (a) False (b) True
32. 32.🖌️ Which CSS property sets the letter colour? (a) font-weight (b) color (c) font-family (d) font-size
33. 33.True or false: #main is an element selector. (a) False (b) True
34. 34.🎯 Can many elements share the same class? (a) Yes (b) No
35. 35.🎯 Which element does the selector .menu style? (a) <div id="menu"> (b) <div class="menu"> (c) <span class="big"> (d) <div class="note">
36. 36.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      text-align: center;
      font-size: 20px;
      padding: 8px;
      border: 2px solid;
    }
37. 37.True or false: padding is the gap to other boxes. (a) False (b) True
38. 38.💪 Which justify-content value puts boxes in the middle? (a) flex-end (b) center (c) flex-start (d) space-between
39. 39.💪 Which flexbox property sets space between boxes? (a) align-items (b) flex-direction (c) justify-content (d) gap
40. 40.🎯 What kind of selector is #top? (a) an id selector (b) an element selector (c) a class selector

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