CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 289 · 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.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 2 (c) 4 (d) 3
2. 2.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 50px;
     padding: 5px;
     border: 5px solid black;
     margin: 20px;
   }
3. 3.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 320px;
     justify-content: flex-end;
   }
   Inside are 4 boxes, each 60px wide (no margins).
4. 4.📱 The screen is 414px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 16px;
     }
   } (a) No (b) Yes
5. 5.✍️ Which property is set to 10px in this rule?
   #top {
     margin: 10px;
     border: 2px solid;
   } (a) 10px (b) padding (c) margin (d) font-weight
6. 6.🌈 Which colour is rgb(0, 255, 0)? (a) bright green (b) yellow (c) red (d) white
7. 7.🌈 Which colour is #0000ff? (a) bright green (b) magenta (c) white (d) blue
8. 8.What does text-align do? (a) makes letters bigger (b) centres a heading (c) makes the text bold (d) sets the letter colour
9. 9.🎯 Which element does the selector #hero style? (a) <h2 class="hero"> (b) <h2 id="hero"> (c) <li class="note"> (d) <h2 id="top">
10. 10.🎯 Which sign starts a class selector? (a) # (b) . (c) @ (d) &
11. 11.📱 max-width: 600px applies when the screen is ___. (a) turned off (b) 600px or wider (c) 600px or narrower (d) exactly 1000px
12. 12.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 22px;
      }
    }
13. 13.True or false: .menu is an id selector. (a) True (b) False
14. 14.True or false: CSS sets colours and fonts. (a) False (b) True
15. 15.🌈 In #000b00 the green part is the hex number 0b. What is it as a normal number?
16. 16.Which of these is margin? (a) the gap round content (b) the text or picture (c) the gap to other boxes (d) the line round the box
17. 17.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 210px;
      padding: 20px;
      border: 4px solid black;
      margin: 20px;
    }
18. 18.⚖️ What colour is the text of this element?
    <h2 class="big" id="end">Hi</h2>
    CSS:
    h2 { color: black; }
    h2 { color: blue; } (a) orange (b) black (c) red (d) blue
19. 19.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 190px;
      padding: 25px;
      border: 2px solid black;
      margin: 5px;
    }
20. 20.🎯 Which CSS selector matches this element?
    <li class="menu" id="intro">Hello</li> (a) #menu (b) div (c) #main (d) li
21. 21.🖌️ What colour is behind the letters?
    p {
      text-align: left;
      font-size: 36px;
      background-color: orange;
      color: yellow;
    } (a) blue (b) yellow (c) orange
22. 22.🎯 Which CSS selector matches this element?
    <p class="red" id="intro">Hello</p> (a) .box (b) .intro (c) p (d) #main
23. 23.🎯 What kind of selector is p? (a) a class selector (b) an id selector (c) an element selector
24. 24.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 16px;
      }
    } (a) Yes (b) No
25. 25.⚖️ Which selector is the weakest? (a) an element selector (b) an id selector (c) a class selector
26. 26.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    }
27. 27.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 8px;
      }
    }
28. 28.🔍 Which is the odd one out? (a) makes headings and lists (b) checks a quiz answer (c) puts a picture on a page (d) makes a link
29. 29.🌈 Which colour of light is strongest in rgb(84, 251, 68)? (a) blue (b) green (c) red
30. 30.⚖️ What colour is the text of this element?
    <h1 class="note" id="hero">Hi</h1>
    CSS:
    #hero { color: green; }
    #hero { color: blue; } (a) green (b) red (c) blue (d) purple
31. 31.📱 What does a media query check? (a) the battery level (b) the screen width (c) the time of day (d) the page title
32. 32.✍️ How does a CSS comment start? (a) <!-- (b) /* (c) // (d) #
33. 33.📱 Responsive design means a page ___. (a) fits every screen (b) never changes (c) is only for laptops (d) has no pictures
34. 34.✍️ Which property is set to 20px in this rule?
    .box {
      text-align: center;
      background-color: yellow;
      font-size: 20px;
    } (a) font-size (b) background-color (c) text-align (d) 20px
35. 35.🎨 Which attribute adds CSS inside one tag? (a) alt (b) src (c) href (d) style
36. 36.True or false: HTML makes a link. (a) False (b) True
37. 37.⚖️ What colour is the text of this element?
    <h2 class="box" id="intro">Hi</h2>
    CSS:
    h2 { color: green; }
    h2 { color: purple; } (a) purple (b) yellow (c) green (d) white
38. 38.🖌️ Which CSS property makes the text bold? (a) font-weight (b) color (c) text-align (d) font-family
39. 39.🔍 Which is the odd one out? (a) adds space around boxes (b) puts a picture on a page (c) rounds box corners (d) sets colours and fonts
40. 40.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 70px;
      padding: 10px;
      border: 1px solid black;
      margin: 5px;
    }

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