CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 286 · 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 colour is behind the letters?
   p {
     text-align: right;
     background-color: orange;
     color: blue;
     font-size: 24px;
   } (a) orange (b) blue (c) red
2. 2.✍️ Which sign goes between a property and its value? (a) - (b) = (c) : (d) ;
3. 3.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 290px;
     padding: 5px;
     border: 2px solid black;
     margin: 20px;
   }
4. 4.💪 Which flexbox property picks row or column? (a) gap (b) justify-content (c) flex-direction (d) display: flex
5. 5.🎯 Which sign starts a class selector? (a) @ (b) & (c) . (d) #
6. 6.✍️ Which property is set to 300px in this rule?
   .note {
     font-style: italic;
     width: 300px;
   } (a) width (b) color (c) font-style (d) 300px
7. 7.🎯 Which CSS selector matches this element?
   <div class="menu" id="hero">Hello</div> (a) .hero (b) span (c) #top (d) .menu
8. 8.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) packs boxes at the end (c) packs boxes at the start (d) puts boxes in the middle
9. 9.✍️ How many declarations (property: value pairs) are in this rule?
   h1 {
     text-align: center;
     width: 300px;
     font-size: 20px;
   }
10. 10.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 130px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 60px wide (no margins).
11. 11.⚖️ What colour is the text of this element?
    <h1 class="note" id="main">Hi</h1>
    CSS:
    .note { color: blue; }
    .note { color: white; } (a) blue (b) white (c) orange (d) yellow
12. 12.Which of these does JavaScript do? (a) gives the page structure (b) changes the page live (c) adds space around boxes (d) lays out the page
13. 13.Which of these does CSS do? (a) changes the page live (b) makes headings and lists (c) gives the page structure (d) adds space around boxes
14. 14.🧩 Which language changes the page live? (a) CSS (b) HTML (c) JavaScript
15. 15.True or false: CSS adds space around boxes. (a) True (b) False
16. 16.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 200px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 80px wide (no margins).
17. 17.🌈 Which colour is #ffffff? (a) black (b) magenta (c) white (d) cyan
18. 18.💪 Which flexbox property lines boxes up across? (a) gap (b) justify-content (c) align-items (d) display: flex
19. 19.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 90px;
      padding: 5px;
      border: 3px solid black;
      margin: 15px;
    }
20. 20.🧩 Which language rounds box corners? (a) JavaScript (b) CSS (c) HTML
21. 21.🌈 In #0000dc the blue part is the hex number dc. What is it as a normal number?
22. 22.✍️ In color: blue; which part is the property? (a) ; (b) : (c) color (d) blue
23. 23.💪 Which flexbox property spaces boxes along a row? (a) align-items (b) justify-content (c) display: flex (d) flex-direction
24. 24.🌈 Which colour is rgb(0, 0, 255)? (a) magenta (b) black (c) blue (d) white
25. 25.🔍 Which is the odd one out? (a) puts a picture on a page (b) makes headings and lists (c) makes a form box (d) sets colours and fonts
26. 26.Which of these does CSS do? (a) makes a link (b) rounds box corners (c) shows a pop-up message (d) makes a form box
27. 27.🖌️ What colour is behind the letters?
    li {
      font-size: 12px;
      background-color: orange;
      color: black;
      text-align: right;
    } (a) black (b) orange (c) blue
28. 28.True or false: CSS makes a form box. (a) True (b) False
29. 29.True or false: the border is the line round the box. (a) False (b) True
30. 30.📱 min-width: 800px applies when the screen is ___. (a) turned off (b) 800px or wider (c) 800px or narrower (d) exactly 100px
31. 31.🎯 Which CSS selector matches this element?
    <li class="menu" id="intro">Hello</li> (a) div (b) .intro (c) #menu (d) #intro
32. 32.🧩 Which language makes a form box? (a) JavaScript (b) HTML (c) CSS
33. 33.🎯 Which element does the selector .box style? (a) <div class="menu"> (b) <li class="box"> (c) <li id="box"> (d) <li class="star">
34. 34.🖌️ Which CSS property colours behind the text? (a) text-align (b) font-size (c) background-color (d) font-family
35. 35.🌈 In #rrggbb, which colour do the last two digits give? (a) blue (b) white (c) red (d) green
36. 36.⚖️ What colour is the text of this element?
    <p class="star" id="intro">Hi</p>
    CSS:
    p { color: red; }
    p { color: purple; } (a) purple (b) blue (c) red (d) yellow
37. 37.🎯 What kind of selector is li? (a) an element selector (b) a class selector (c) an id selector
38. 38.What does justify-content: center do? (a) puts boxes in the middle (b) equal gaps, none at ends (c) packs boxes at the start (d) packs boxes at the end
39. 39.True or false: HTML reacts to a button click. (a) False (b) True
40. 40.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) turned off (c) 600px or wider (d) exactly 1000px

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