CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 948 · 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 colour of light is strongest in rgb(31, 82, 204)? (a) blue (b) green (c) red
2. 2.🖌️ What colour are the letters?
   li {
     text-align: right;
     background-color: green;
     font-size: 40px;
     color: purple;
   } (a) purple (b) black (c) green
3. 3.🎨 Which tag holds CSS inside the head? (a) <script> (b) <body> (c) <style> (d) <css>
4. 4.🖌️ What colour is behind the letters?
   h1 {
     color: white;
     text-align: left;
     background-color: red;
     font-size: 12px;
   } (a) white (b) red (c) blue
5. 5.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 250px;
     padding: 25px;
     border: 1px solid black;
     margin: 20px;
   }
6. 6.🎯 How many elements on a page should have the same id? (a) 5 (b) 1 (c) any number (d) 2
7. 7.🖌️ Which CSS property makes the text bold? (a) font-weight (b) font-size (c) color (d) background-color
8. 8.📱 The screen is 540px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 20px;
     }
   } (a) No (b) Yes
9. 9.True or false: HTML puts a picture on a page. (a) False (b) True
10. 10.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 170px;
      padding: 10px;
      border: 2px solid black;
      margin: 5px;
    }
11. 11.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
12. 12.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) 600px or narrower (c) 600px or wider (d) turned off
13. 13.✍️ Which property is set to yellow in this rule?
    li {
      background-color: yellow;
      font-style: italic;
      color: red;
    } (a) margin (b) yellow (c) padding (d) background-color
14. 14.What does justify-content: flex-end do? (a) packs boxes at the end (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the start
15. 15.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the later one (c) the shorter one (d) neither
16. 16.🌈 Which colour is #00ff00? (a) yellow (b) magenta (c) black (d) bright green
17. 17.🎯 What kind of selector is .note? (a) a class selector (b) an id selector (c) an element selector
18. 18.🌈 In #a90000 the red part is the hex number a9. What is it as a normal number?
19. 19.Which of these is the border? (a) a solid or dotted edge (b) the gap to other boxes (c) space outside the border (d) space inside the border
20. 20.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 6px;
      }
    } (a) Yes (b) No
21. 21.What does justify-content: flex-start do? (a) packs boxes at the end (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the start
22. 22.Which of these is padding? (a) the text or picture (b) space inside the border (c) space outside the border (d) the line round the box
23. 23.✍️ Which sign ends each CSS declaration? (a) : (b) , (c) . (d) ;
24. 24.What does color do? (a) colours behind the text (b) makes the text bold (c) sets the letter colour (d) picks the font style
25. 25.🎯 Which sign starts a class selector? (a) & (b) # (c) . (d) @
26. 26.✍️ Which property is set to 20px in this rule?
    body {
      font-size: 20px;
      width: 300px;
      color: red;
      padding: 8px;
    } (a) 20px (b) text-align (c) font-size (d) background-color
27. 27.📱 Which tag helps phones show a page at the right size? (a) the viewport meta tag (b) the title tag (c) the br tag (d) the hr tag
28. 28.⚖️ What colour is the text of this element?
    <h2 class="big" id="intro">Hi</h2>
    CSS:
    .big { color: green; }
    .big { color: red; } (a) white (b) black (c) red (d) green
29. 29.✍️ What value is given to background-color in this rule?
    p {
      font-size: 20px;
      background-color: yellow;
      width: 300px;
    } (a) 10px (b) yellow (c) 8px (d) background-color
30. 30.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
31. 31.🌈 In #0000df the blue part is the hex number df. What is it as a normal number?
32. 32.💪 Which justify-content value packs boxes at the start? (a) space-between (b) flex-end (c) flex-start (d) center
33. 33.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 50px;
      padding: 10px;
      border: 5px solid black;
      margin: 15px;
    }
34. 34.✍️ Which property is set to italic in this rule?
    body {
      font-weight: bold;
      font-style: italic;
    } (a) italic (b) font-style (c) font-size (d) color
35. 35.✍️ In color: blue; which part is the property? (a) color (b) blue (c) : (d) ;
36. 36.✍️ In color: blue; which part is the value? (a) color (b) blue (c) ; (d) :
37. 37.🎯 Which element does the selector p style? (a) <li id="logo"> (b) <h1> (c) <p class="red"> (d) <h2 class="red">
38. 38.⚖️ What colour is the text of this element?
    <p class="box" id="intro">Hi</p>
    CSS:
    .box { color: yellow; }
    #intro { color: black; }
    p { color: orange; } (a) red (b) orange (c) yellow (d) black
39. 39.📦 In the box model, which part is the text or picture? (a) content (b) margin (c) padding (d) border
40. 40.🌈 Which colour is rgb(255, 0, 255)? (a) magenta (b) bright green (c) yellow (d) blue

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