CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 249 · 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 1100px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 18px;
     }
   } (a) No (b) Yes
2. 2.🖌️ Which CSS property picks the font style? (a) font-family (b) font-weight (c) font-size (d) background-color
3. 3.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 16px;
     }
   }
4. 4.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (min-width: 600px) {
     p {
       font-size: 24px;
     }
   }
5. 5.⚖️ What colour is the text of this element?
   <h2 class="note" id="main">Hi</h2>
   CSS:
   h2 { color: blue; }
   #main { color: black; }
   .note { color: green; } (a) black (b) white (c) green (d) blue
6. 6.⚖️ Which selector is the weakest? (a) a class selector (b) an element selector (c) an id selector
7. 7.📦 In the box model, which part is a solid or dotted edge? (a) margin (b) content (c) border (d) padding
8. 8.✍️ In color: blue; which part is the property? (a) blue (b) : (c) color (d) ;
9. 9.Which of these does JavaScript do? (a) makes headings and lists (b) changes the text size (c) sets colours and fonts (d) counts down a timer
10. 10.True or false: p is an element selector. (a) False (b) True
11. 11.🖌️ What colour are the letters?
    h2 {
      background-color: red;
      text-align: left;
      font-size: 12px;
      color: purple;
    } (a) purple (b) green (c) red
12. 12.✍️ What value is given to font-style in this rule?
    p {
      font-style: italic;
      text-align: center;
    } (a) italic (b) font-style (c) red (d) 20px
13. 13.True or false: .card is an element selector. (a) False (b) True
14. 14.📦 In the box model, which part is the gap to other boxes? (a) content (b) padding (c) border (d) margin
15. 15.🌈 In #060000 the red part is the hex number 06. What is it as a normal number?
16. 16.True or false: .card is a class selector. (a) True (b) False
17. 17.🌈 Which colour is #ffff00? (a) black (b) red (c) blue (d) yellow
18. 18.🎯 Which CSS selector matches this element?
    <li class="big" id="hero">Hello</li> (a) #top (b) div (c) #big (d) li
19. 19.📦 In the box model, which part is the gap round content? (a) padding (b) content (c) margin (d) border
20. 20.🖌️ Where does the text sit on its line?
    h1 {
      font-size: 12px;
      background-color: black;
      text-align: right;
      color: yellow;
    } (a) in the middle (b) on the right (c) on the left
21. 21.🖌️ Where does the text sit on its line?
    h2 {
      background-color: green;
      text-align: right;
      color: purple;
      font-size: 24px;
    } (a) in the middle (b) on the left (c) on the right
22. 22.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 530px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 80px wide (no margins).
23. 23.Which of these does CSS do? (a) sets colours and fonts (b) shows a pop-up message (c) makes a link (d) reacts to a button click
24. 24.🌈 Which colour is #000000? (a) blue (b) white (c) cyan (d) black
25. 25.🖌️ How big is the text, in px?
    p {
      color: orange;
      background-color: blue;
      font-size: 28px;
      text-align: right;
    }
26. 26.⚖️ What colour is the text of this element?
    <h2 class="big" id="intro">Hi</h2>
    CSS:
    h2 { color: orange; }
    h2 { color: red; } (a) white (b) purple (c) red (d) orange
27. 27.🎯 What kind of selector is p? (a) a class selector (b) an id selector (c) an element selector
28. 28.🌈 Which colour of light is strongest in rgb(88, 67, 193)? (a) blue (b) red (c) green
29. 29.📱 What does a media query check? (a) the time of day (b) the screen width (c) the page title (d) the battery level
30. 30.What does font-size do? (a) makes letters bigger (b) makes the text bold (c) centres a heading (d) sets the letter colour
31. 31.🎨 A CSS file usually ends with which extension? (a) .js (b) .css (c) .png (d) .html
32. 32.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 160px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 60px wide (no margins).
33. 33.⚖️ What colour is the text of this element?
    <h2 class="star" id="logo">Hi</h2>
    CSS:
    #logo { color: red; }
    h2 { color: yellow; }
    .star { color: black; } (a) red (b) purple (c) yellow (d) black
34. 34.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 8px;
      }
    } (a) Yes (b) No
35. 35.⚖️ What colour is the text of this element?
    <h1 class="note" id="main">Hi</h1>
    CSS:
    #main { color: purple; }
    .note { color: black; } (a) green (b) purple (c) black (d) yellow
36. 36.🎯 Which CSS selector matches this element?
    <p class="big" id="main">Hello</p> (a) .main (b) .red (c) #main (d) #big
37. 37.🎯 What kind of selector is .star? (a) a class selector (b) an element selector (c) an id selector
38. 38.🌈 Which colour is rgb(255, 255, 0)? (a) red (b) cyan (c) blue (d) yellow
39. 39.Which of these is the border? (a) the text or picture (b) the line round the box (c) space inside the border (d) the gap to other boxes
40. 40.🔍 Which is the odd one out? (a) reacts to a button click (b) counts down a timer (c) shows a pop-up message (d) makes headings and lists

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