CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 693 · 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 820px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 18px;
     }
   } (a) Yes (b) No
2. 2.✍️ Which property is set to 300px in this rule?
   h1 {
     width: 300px;
     background-color: yellow;
     font-size: 20px;
   } (a) color (b) 300px (c) width (d) font-style
3. 3.🎨 Which tag connects an outside CSS file? (a) <img> (b) <css> (c) <a> (d) <link>
4. 4.🔍 Which is the odd one out? (a) makes headings and lists (b) puts a picture on a page (c) gives the page structure (d) adds space around boxes
5. 5.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
6. 6.⚖️ Which selector is the strongest? (a) a class selector (b) an element selector (c) an id selector
7. 7.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 150px;
     justify-content: flex-start;
   }
   Inside are 2 boxes, each 40px wide (no margins).
8. 8.✍️ Which property is set to italic in this rule?
   #top {
     font-style: italic;
     padding: 8px;
   } (a) font-style (b) color (c) font-size (d) italic
9. 9.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 40px;
     padding: 20px;
     border: 5px solid black;
     margin: 0px;
   }
10. 10.🖌️ Which CSS property makes the text bold? (a) text-align (b) font-weight (c) color (d) background-color
11. 11.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 260px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 100px wide (no margins).
12. 12.🌈 Which colour of light is strongest in rgb(2, 233, 89)? (a) red (b) green (c) blue
13. 13.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 200px;
      padding: 25px;
      border: 2px solid black;
      margin: 10px;
    }
14. 14.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) exactly 100px (c) turned off (d) 800px or wider
15. 15.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 380px;
      justify-content: center;
    }
    Inside are 3 boxes, each 100px wide (no margins).
16. 16.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 160px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 40px wide (no margins).
17. 17.🎨 One CSS file can style how many pages? (a) many pages (b) only one word (c) only one image (d) no pages
18. 18.True or false: JavaScript reacts to a button click. (a) False (b) True
19. 19.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 8px;
      }
    } (a) No (b) Yes
20. 20.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 220px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 40px wide (no margins).
21. 21.🖌️ What colour is behind the letters?
    p {
      text-align: left;
      font-size: 24px;
      background-color: blue;
      color: red;
    } (a) red (b) blue (c) green
22. 22.🎯 Which CSS selector matches this element?
    <div class="red" id="main">Hello</div> (a) #logo (b) #red (c) div (d) .main
23. 23.🎯 What kind of selector is .note? (a) an element selector (b) an id selector (c) a class selector
24. 24.Which of these is padding? (a) the gap to other boxes (b) a solid or dotted edge (c) the line round the box (d) the gap round content
25. 25.🎯 Which CSS selector matches this element?
    <p class="big" id="end">Hello</p> (a) h1 (b) .red (c) p (d) .end
26. 26.✍️ Which property is set to 2px solid in this rule?
    .note {
      color: red;
      border: 2px solid;
    } (a) border (b) 2px solid (c) width (d) font-style
27. 27.💪 Which justify-content value packs boxes at the end? (a) center (b) flex-end (c) space-between (d) flex-start
28. 28.Which of these is margin? (a) the text or picture (b) the line round the box (c) a solid or dotted edge (d) space outside the border
29. 29.✍️ Which sign ends each CSS declaration? (a) , (b) : (c) . (d) ;
30. 30.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
31. 31.✍️ What value is given to border in this rule?
    .note {
      width: 300px;
      border: 2px solid;
      background-color: yellow;
      padding: 8px;
    } (a) italic (b) 300px (c) border (d) 2px solid
32. 32.🌈 Which colour is #ffffff? (a) magenta (b) blue (c) yellow (d) white
33. 33.What does text-align do? (a) sets the letter colour (b) picks the font style (c) centres a heading (d) colours behind the text
34. 34.Which of these is the content? (a) the text or picture (b) space outside the border (c) space inside the border (d) the gap round content
35. 35.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 12px;
      }
    }
36. 36.⚖️ What colour is the text of this element?
    <p class="red" id="end">Hi</p>
    CSS:
    #end { color: white; }
    .red { color: green; } (a) white (b) yellow (c) green (d) red
37. 37.⚖️ What colour is the text of this element?
    <p class="big" id="hero">Hi</p>
    CSS:
    p { color: purple; }
    #hero { color: yellow; } (a) green (b) yellow (c) orange (d) purple
38. 38.🌈 Which colour is rgb(0, 255, 0)? (a) yellow (b) bright green (c) magenta (d) black
39. 39.✍️ What value is given to text-align in this rule?
    li {
      color: red;
      font-weight: bold;
      text-align: center;
    } (a) center (b) 10px (c) yellow (d) text-align
40. 40.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) blue (c) red (d) black

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