CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 273 · 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 colour is the text of this element?
   <h2 class="box" id="main">Hi</h2>
   CSS:
   h2 { color: orange; }
   h2 { color: yellow; } (a) orange (b) green (c) red (d) yellow
2. 2.🌈 Which colour of light is strongest in rgb(229, 118, 8)? (a) blue (b) green (c) red
3. 3.📱 The screen is 414px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 24px;
     }
   } (a) Yes (b) No
4. 4.⚖️ What colour is the text of this element?
   <h1 class="big" id="top">Hi</h1>
   CSS:
   .big { color: blue; }
   .big { color: purple; } (a) purple (b) yellow (c) blue (d) red
5. 5.True or false: .menu is a class selector. (a) False (b) True
6. 6.⚖️ What colour is the text of this element?
   <h2 class="big" id="hero">Hi</h2>
   CSS:
   .big { color: yellow; }
   .big { color: blue; } (a) purple (b) yellow (c) blue (d) black
7. 7.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 250px;
     justify-content: flex-end;
   }
   Inside are 4 boxes, each 50px wide (no margins).
8. 8.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 24px;
     }
   }
9. 9.🎯 What kind of selector is .star? (a) an id selector (b) a class selector (c) an element selector
10. 10.🎯 Which element does the selector #main style? (a) <span class="menu"> (b) <div id="main"> (c) <div class="main"> (d) <div id="logo">
11. 11.⚖️ What colour is the text of this element?
    <h1 class="note" id="top">Hi</h1>
    CSS:
    #top { color: white; }
    #top { color: yellow; } (a) yellow (b) black (c) white (d) purple
12. 12.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      font-weight: bold;
      background-color: yellow;
      color: red;
    }
13. 13.✍️ In color: blue; which part is the property? (a) blue (b) ; (c) color (d) :
14. 14.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 90px;
      padding: 25px;
      border: 5px solid black;
      margin: 10px;
    }
15. 15.✍️ What value is given to text-align in this rule?
    li {
      font-weight: bold;
      text-align: center;
      border: 2px solid;
    } (a) yellow (b) center (c) text-align (d) 10px
16. 16.🌈 In #rrggbb, which colour do the last two digits give? (a) white (b) green (c) blue (d) red
17. 17.Which of these is margin? (a) space inside the border (b) the gap round content (c) the line round the box (d) space outside the border
18. 18.🖌️ Which CSS property makes letters bigger? (a) font-family (b) text-align (c) font-size (d) color
19. 19.🌈 What is the biggest number one colour can have in rgb()? (a) 255 (b) 99 (c) 1000 (d) 100
20. 20.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
21. 21.🎨 What does CSS stand for? (a) Creative Sheet System (b) Colourful Site Styles (c) Cascading Style Sheets (d) Computer Style Sheets
22. 22.🌈 Which colour is #ffffff? (a) white (b) black (c) yellow (d) cyan
23. 23.Which of these does HTML do? (a) reacts to a button click (b) lays out the page (c) sets colours and fonts (d) gives the page structure
24. 24.Which of these is the border? (a) the text or picture (b) the line round the box (c) space outside the border (d) space inside the border
25. 25.⚖️ What colour is the text of this element?
    <h2 class="star" id="intro">Hi</h2>
    CSS:
    #intro { color: red; }
    .star { color: white; }
    h2 { color: orange; } (a) black (b) orange (c) white (d) red
26. 26.🌈 Which colour of light is strongest in rgb(94, 88, 247)? (a) red (b) blue (c) green
27. 27.🎯 What kind of selector is .big? (a) an id selector (b) a class selector (c) an element selector
28. 28.🖌️ What colour is behind the letters?
    p {
      color: blue;
      background-color: red;
      text-align: left;
      font-size: 32px;
    } (a) blue (b) red (c) purple
29. 29.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 20px;
      }
    } (a) No (b) Yes
30. 30.🎯 Which element does the selector .box style? (a) <h2 class="star"> (b) <li class="menu"> (c) <h2 id="box"> (d) <h2 class="box">
31. 31.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      border: 2px solid;
    }
32. 32.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 120px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 50px wide (no margins).
33. 33.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 130px;
      padding: 30px;
      border: 2px solid black;
      margin: 5px;
    }
34. 34.🎯 Which sign starts an id selector? (a) & (b) . (c) @ (d) #
35. 35.🌈 Which hex code is black? (a) #ff0000 (b) #ffffff (c) #000000 (d) #0000ff
36. 36.🖌️ How big is the text, in px?
    h2 {
      background-color: green;
      font-size: 28px;
      color: red;
      text-align: center;
    }
37. 37.📱 min-width: 800px applies when the screen is ___. (a) turned off (b) 800px or narrower (c) exactly 100px (d) 800px or wider
38. 38.🎯 Which CSS selector matches this element?
    <h2 class="star" id="hero">Hello</h2> (a) li (b) h2 (c) .menu (d) .hero
39. 39.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 8px;
      }
    }
40. 40.✍️ In color: blue; which part is the value? (a) : (b) ; (c) blue (d) color

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