CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 184 · 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.📱 The screen is 540px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 26px;
     }
   } (a) No (b) Yes
2. 2.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 14px;
     }
   }
3. 3.✍️ In color: blue; which part is the value? (a) ; (b) color (c) blue (d) :
4. 4.⚖️ What colour is the text of this element?
   <h2 class="star" id="intro">Hi</h2>
   CSS:
   h2 { color: green; }
   h2 { color: purple; } (a) blue (b) green (c) purple (d) yellow
5. 5.⚖️ What colour is the text of this element?
   <p class="big" id="top">Hi</p>
   CSS:
   p { color: green; }
   .big { color: blue; } (a) white (b) blue (c) green (d) black
6. 6.🎯 How many elements on a page should have the same id? (a) 1 (b) 5 (c) 2 (d) any number
7. 7.True or false: the content is a solid or dotted edge. (a) False (b) True
8. 8.✍️ What value is given to font-size in this rule?
   p {
     font-style: italic;
     border: 2px solid;
     font-size: 20px;
   } (a) font-size (b) center (c) 20px (d) yellow
9. 9.📱 The screen is 414px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 22px;
     }
   } (a) No (b) Yes
10. 10.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      width: 300px;
      background-color: yellow;
      font-size: 20px;
    }
11. 11.What does text-align do? (a) makes letters bigger (b) centres a heading (c) sets the letter colour (d) colours behind the text
12. 12.🧩 Which language adds space around boxes? (a) HTML (b) JavaScript (c) CSS
13. 13.🎯 Which element does the selector h2 style? (a) <span id="intro"> (b) <li> (c) <div class="star"> (d) <h2 class="star">
14. 14.🎯 What kind of selector is .note? (a) an id selector (b) a class selector (c) an element selector
15. 15.📱 What does a media query check? (a) the time of day (b) the screen width (c) the page title (d) the battery level
16. 16.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 160px;
      padding: 25px;
      border: 1px solid black;
      margin: 10px;
    }
17. 17.✍️ Which sign ends each CSS declaration? (a) . (b) : (c) ; (d) ,
18. 18.Which of these does HTML do? (a) reacts to a button click (b) makes headings and lists (c) checks a quiz answer (d) changes the page live
19. 19.🔍 Which is the odd one out? (a) rounds box corners (b) counts down a timer (c) reacts to a button click (d) checks a quiz answer
20. 20.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 20px;
      }
    } (a) Yes (b) No
21. 21.⚖️ What colour is the text of this element?
    <h2 class="big" id="intro">Hi</h2>
    CSS:
    .big { color: blue; }
    .big { color: green; } (a) blue (b) orange (c) black (d) green
22. 22.🌈 Which colour of light is strongest in rgb(186, 40, 92)? (a) blue (b) red (c) green
23. 23.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 240px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 60px wide (no margins).
24. 24.🎯 Which sign starts a class selector? (a) # (b) & (c) . (d) @
25. 25.True or false: #top is an element selector. (a) True (b) False
26. 26.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 26px;
      }
    } (a) No (b) Yes
27. 27.🌈 Which hex code is black? (a) #ff0000 (b) #ffff00 (c) #000000 (d) #00ff00
28. 28.Which of these is the border? (a) the text or picture (b) a solid or dotted edge (c) space inside the border (d) space outside the border
29. 29.Which of these does CSS do? (a) checks a quiz answer (b) puts a picture on a page (c) changes the text size (d) counts down a timer
30. 30.🎯 Which CSS selector matches this element?
    <h1 class="menu" id="logo">Hello</h1> (a) #logo (b) #end (c) .logo (d) .note
31. 31.🌈 Which colour is #000000? (a) red (b) blue (c) black (d) magenta
32. 32.🖌️ What colour is behind the letters?
    h1 {
      text-align: right;
      background-color: yellow;
      font-size: 32px;
      color: purple;
    } (a) white (b) purple (c) yellow
33. 33.⚖️ What colour is the text of this element?
    <h2 class="note" id="intro">Hi</h2>
    CSS:
    .note { color: yellow; }
    .note { color: red; } (a) yellow (b) white (c) orange (d) red
34. 34.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 100px wide (no margins).
35. 35.✍️ Which property is set to 300px in this rule?
    .note {
      width: 300px;
      font-size: 20px;
    } (a) font-style (b) width (c) color (d) 300px
36. 36.Which of these is margin? (a) the line round the box (b) space outside the border (c) the text or picture (d) space inside the border
37. 37.🌈 Which colour is rgb(0, 0, 255)? (a) cyan (b) white (c) yellow (d) blue
38. 38.🎯 Which element does the selector p style? (a) <p class="menu"> (b) <li id="top"> (c) <h2 class="menu"> (d) <h1>
39. 39.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      width: 300px;
    }
40. 40.⚖️ What colour is the text of this element?
    <p class="red" id="end">Hi</p>
    CSS:
    #end { color: black; }
    #end { color: purple; } (a) green (b) purple (c) black (d) white

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