CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 142 · 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 kind of selector is li? (a) a class selector (b) an element selector (c) an id selector
2. 2.✍️ What is the selector in this CSS rule?
   #top {
     background-color: yellow;
     padding: 8px;
     font-style: italic;
     width: 300px;
   } (a) 8px (b) li (c) background-color (d) #top
3. 3.🎯 Which sign starts a class selector? (a) # (b) . (c) @ (d) &
4. 4.True or false: HTML rounds box corners. (a) False (b) True
5. 5.🎯 Which element does the selector #end style? (a) <h1 id="hero"> (b) <h2 class="menu"> (c) <h1 id="end"> (d) <h1 class="end">
6. 6.🌈 Which colour is #ff00ff? (a) bright green (b) red (c) magenta (d) black
7. 7.✍️ In color: blue; which part is the value? (a) color (b) blue (c) ; (d) :
8. 8.✍️ What value is given to margin in this rule?
   body {
     margin: 10px;
     font-style: italic;
   } (a) bold (b) margin (c) 8px (d) 10px
9. 9.What does background-color do? (a) colours behind the text (b) sets the letter colour (c) makes letters bigger (d) centres a heading
10. 10.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 350px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 100px wide (no margins).
11. 11.🌈 Which hex code is cyan? (a) #ff00ff (b) #00ff00 (c) #ff0000 (d) #00ffff
12. 12.🌈 Which colour is rgb(255, 0, 0)? (a) bright green (b) magenta (c) white (d) red
13. 13.🌈 Which colour is rgb(0, 255, 255)? (a) magenta (b) black (c) blue (d) cyan
14. 14.🌈 Hex digits go 0 to 9, then A to which letter? (a) G (b) J (c) Z (d) F
15. 15.🌈 In #490000 the red part is the hex number 49. What is it as a normal number?
16. 16.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    }
17. 17.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 26px;
      }
    } (a) Yes (b) No
18. 18.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    } (a) Yes (b) No
19. 19.True or false: HTML gives the page structure. (a) True (b) False
20. 20.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
21. 21.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      color: red;
      padding: 8px;
      margin: 10px;
    }
22. 22.🌈 Which colour of light is strongest in rgb(222, 87, 4)? (a) blue (b) green (c) red
23. 23.🎯 Which element does the selector .red style? (a) <li id="red"> (b) <li class="red"> (c) <div class="star"> (d) <li class="box">
24. 24.✍️ What is the selector in this CSS rule?
    p {
      width: 300px;
      font-size: 20px;
    } (a) p (b) 20px (c) width (d) .note
25. 25.✍️ What is the selector in this CSS rule?
    li {
      font-size: 20px;
      color: red;
      text-align: center;
      background-color: yellow;
    } (a) font-size (b) red (c) li (d) body
26. 26.✍️ What value is given to width in this rule?
    body {
      font-size: 20px;
      width: 300px;
      font-weight: bold;
      padding: 8px;
    } (a) 300px (b) italic (c) width (d) red
27. 27.🎯 Which sign starts an id selector? (a) & (b) @ (c) . (d) #
28. 28.Which of these does HTML do? (a) checks a quiz answer (b) counts down a timer (c) changes the text size (d) makes a form box
29. 29.✍️ Which property is set to red in this rule?
    body {
      color: red;
      background-color: yellow;
      padding: 8px;
      font-weight: bold;
    } (a) red (b) text-align (c) font-size (d) color
30. 30.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 110px;
      padding: 15px;
      border: 2px solid black;
      margin: 5px;
    }
31. 31.🌈 Which hex code is black? (a) #ff00ff (b) #ff0000 (c) #0000ff (d) #000000
32. 32.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 180px;
      padding: 25px;
      border: 5px solid black;
      margin: 0px;
    }
33. 33.🌈 In #000007 the blue part is the hex number 07. What is it as a normal number?
34. 34.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) blue (c) green (d) white
35. 35.💪 Which flexbox property turns on flexbox? (a) align-items (b) gap (c) justify-content (d) display: flex
36. 36.⚖️ What colour is the text of this element?
    <h1 class="big" id="intro">Hi</h1>
    CSS:
    .big { color: green; }
    .big { color: black; } (a) orange (b) black (c) white (d) green
37. 37.🎯 Which element does the selector #intro style? (a) <h2 id="intro"> (b) <h2 class="intro"> (c) <li class="note"> (d) <h2 id="main">
38. 38.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 240px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 60px wide (no margins).
39. 39.Which of these is padding? (a) the text or picture (b) space outside the border (c) the gap round content (d) the gap to other boxes
40. 40.Which of these does JavaScript do? (a) makes a link (b) makes a form box (c) shows a pop-up message (d) changes the text size

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