CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 655 · 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.🎯 What kind of selector is .card? (a) a class selector (b) an id selector (c) an element selector
2. 2.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) black (c) blue (d) green
3. 3.🖌️ Which CSS property sets the letter colour? (a) background-color (b) color (c) font-family (d) font-size
4. 4.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 14px;
     }
   }
5. 5.⚖️ What colour is the text of this element?
   <h2 class="note" id="hero">Hi</h2>
   CSS:
   #hero { color: orange; }
   #hero { color: red; } (a) black (b) orange (c) yellow (d) red
6. 6.✍️ What is the selector in this CSS rule?
   body {
     font-size: 20px;
     width: 300px;
     font-style: italic;
   } (a) 300px (b) .box (c) font-size (d) body
7. 7.🎯 What kind of selector is .big? (a) an id selector (b) an element selector (c) a class selector
8. 8.True or false: .big is an id selector. (a) False (b) True
9. 9.🔍 Which is the odd one out? (a) makes a form box (b) makes a link (c) lays out the page (d) puts a picture on a page
10. 10.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 120px;
      padding: 25px;
      border: 1px solid black;
      margin: 0px;
    }
11. 11.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 40px wide (no margins).
12. 12.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) turned off (c) 600px or narrower (d) 600px or wider
13. 13.🌈 In #000061 the blue part is the hex number 61. What is it as a normal number?
14. 14.🎯 Which CSS selector matches this element?
    <li class="big" id="logo">Hello</li> (a) #end (b) .big (c) #big (d) .logo
15. 15.⚖️ What colour is the text of this element?
    <h1 class="box" id="main">Hi</h1>
    CSS:
    #main { color: black; }
    .box { color: blue; } (a) blue (b) black (c) red (d) yellow
16. 16.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 80px;
      padding: 20px;
      border: 3px solid black;
      margin: 10px;
    }
17. 17.🎯 Which CSS selector matches this element?
    <div class="star" id="end">Hello</div> (a) .menu (b) #end (c) span (d) #hero
18. 18.Which of these does CSS do? (a) sets colours and fonts (b) makes a form box (c) shows a pop-up message (d) counts down a timer
19. 19.🎯 What kind of selector is h1? (a) an element selector (b) a class selector (c) an id selector
20. 20.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 110px;
      padding: 30px;
      border: 5px solid black;
      margin: 15px;
    }
21. 21.💪 Which flexbox property spaces boxes along a row? (a) align-items (b) gap (c) justify-content (d) flex-direction
22. 22.💪 Which justify-content value packs boxes at the start? (a) center (b) flex-start (c) flex-end (d) space-between
23. 23.True or false: padding is the gap to other boxes. (a) False (b) True
24. 24.What does justify-content: center do? (a) packs boxes at the end (b) equal gaps, none at ends (c) packs boxes at the start (d) puts boxes in the middle
25. 25.✍️ Which property is set to center in this rule?
    p {
      font-weight: bold;
      text-align: center;
    } (a) text-align (b) margin (c) background-color (d) center
26. 26.🖌️ Which CSS property picks the font style? (a) text-align (b) background-color (c) font-weight (d) font-family
27. 27.💪 Which justify-content value puts boxes in the middle? (a) center (b) flex-start (c) flex-end (d) space-between
28. 28.🌈 Which colour is #0000ff? (a) red (b) magenta (c) blue (d) white
29. 29.🌈 Which colour of light is strongest in rgb(204, 121, 6)? (a) red (b) green (c) blue
30. 30.⚖️ What colour is the text of this element?
    <h1 class="red" id="top">Hi</h1>
    CSS:
    h1 { color: black; }
    h1 { color: purple; } (a) orange (b) black (c) white (d) purple
31. 31.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      width: 300px;
      color: red;
    }
32. 32.💪 Which flexbox property picks row or column? (a) align-items (b) display: flex (c) flex-direction (d) justify-content
33. 33.🎨 A CSS file usually ends with which extension? (a) .js (b) .png (c) .css (d) .html
34. 34.Which of these does HTML do? (a) changes the text size (b) adds space around boxes (c) changes the page live (d) gives the page structure
35. 35.✍️ In color: blue; which part is the value? (a) : (b) color (c) ; (d) blue
36. 36.🌈 Which hex code is cyan? (a) #00ff00 (b) #00ffff (c) #ff00ff (d) #0000ff
37. 37.🌈 Which colour is rgb(255, 255, 255)? (a) white (b) cyan (c) red (d) yellow
38. 38.🎯 Which element does the selector h1 style? (a) <h2> (b) <li class="menu"> (c) <h1 class="menu"> (d) <div id="top">
39. 39.🔍 Which is the odd one out? (a) sets colours and fonts (b) counts down a timer (c) changes the text size (d) rounds box corners
40. 40.📦 In the box model, which part is the line round the box? (a) margin (b) padding (c) border (d) content

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