CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 126 · 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.⚖️ Which selector is the strongest? (a) an id selector (b) an element selector (c) a class selector
2. 2.🖌️ Which CSS property colours behind the text? (a) background-color (b) font-family (c) text-align (d) color
3. 3.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 250px;
     justify-content: flex-start;
   }
   Inside are 4 boxes, each 60px wide (no margins).
4. 4.✍️ How many declarations (property: value pairs) are in this rule?
   li {
     margin: 10px;
     font-style: italic;
   }
5. 5.📦 In the box model, which part is space inside the border? (a) content (b) padding (c) border (d) margin
6. 6.🎨 A CSS file usually ends with which extension? (a) .js (b) .css (c) .png (d) .html
7. 7.🌈 Which colour of light is strongest in rgb(118, 45, 178)? (a) blue (b) red (c) green
8. 8.What does color do? (a) picks the font style (b) colours behind the text (c) sets the letter colour (d) makes letters bigger
9. 9.⚖️ What colour is the text of this element?
   <p class="menu" id="main">Hi</p>
   CSS:
   #main { color: yellow; }
   #main { color: orange; } (a) orange (b) blue (c) yellow (d) green
10. 10.True or false: .star is an element selector. (a) True (b) False
11. 11.🌈 In #rrggbb, which colour do the last two digits give? (a) green (b) blue (c) red (d) white
12. 12.🎨 One CSS file can style how many pages? (a) only one word (b) only one image (c) many pages (d) no pages
13. 13.True or false: HTML makes a form box. (a) False (b) True
14. 14.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    }
15. 15.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    } (a) Yes (b) No
16. 16.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      font-style: italic;
      text-align: center;
      font-size: 20px;
      color: red;
    }
17. 17.🔍 Which is the odd one out? (a) makes a link (b) puts a picture on a page (c) checks a quiz answer (d) makes a form box
18. 18.⚖️ Which selector is the weakest? (a) an element selector (b) an id selector (c) a class selector
19. 19.⚖️ What colour is the text of this element?
    <p class="box" id="end">Hi</p>
    CSS:
    p { color: orange; }
    .box { color: purple; } (a) orange (b) red (c) purple (d) blue
20. 20.💪 Which justify-content value puts boxes in the middle? (a) center (b) space-between (c) flex-start (d) flex-end
21. 21.🎨 Which tag connects an outside CSS file? (a) <img> (b) <a> (c) <link> (d) <css>
22. 22.🖌️ Which CSS property makes the text bold? (a) font-size (b) color (c) font-weight (d) background-color
23. 23.🎯 Which CSS selector matches this element?
    <span class="star" id="logo">Hello</span> (a) .star (b) #star (c) .menu (d) p
24. 24.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 200px;
      padding: 25px;
      border: 1px solid black;
      margin: 0px;
    }
25. 25.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) exactly 100px (c) turned off (d) 800px or wider
26. 26.🖌️ What colour is behind the letters?
    li {
      text-align: center;
      font-size: 28px;
      color: purple;
      background-color: black;
    } (a) blue (b) black (c) purple
27. 27.🌈 Which hex code is bright green? (a) #ffffff (b) #ff00ff (c) #00ff00 (d) #0000ff
28. 28.🖌️ What colour are the letters?
    h1 {
      background-color: green;
      color: orange;
      text-align: center;
      font-size: 24px;
    } (a) green (b) orange (c) purple
29. 29.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 100px;
      padding: 30px;
      border: 4px solid black;
      margin: 15px;
    }
30. 30.🎯 What kind of selector is li? (a) an element selector (b) an id selector (c) a class selector
31. 31.🌈 In #0e0000 the red part is the hex number 0e. What is it as a normal number?
32. 32.🔍 Which is the odd one out? (a) checks a quiz answer (b) reacts to a button click (c) shows a pop-up message (d) sets colours and fonts
33. 33.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 140px;
      padding: 10px;
      border: 2px solid black;
      margin: 10px;
    }
34. 34.📱 Responsive design means a page ___. (a) fits every screen (b) has no pictures (c) never changes (d) is only for laptops
35. 35.Which of these does CSS do? (a) counts down a timer (b) reacts to a button click (c) makes headings and lists (d) changes the text size
36. 36.✍️ In color: blue; which part is the value? (a) : (b) ; (c) blue (d) color
37. 37.What does font-family do? (a) sets the letter colour (b) makes the text bold (c) picks the font style (d) centres a heading
38. 38.🌈 Which hex code is yellow? (a) #0000ff (b) #ffffff (c) #ffff00 (d) #00ffff
39. 39.🌈 Which colour is rgb(0, 0, 0)? (a) yellow (b) black (c) blue (d) cyan
40. 40.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 70px;
      padding: 20px;
      border: 4px solid black;
      margin: 0px;
    }

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