CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 363 · 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 does color do? (a) picks the font style (b) makes the text bold (c) sets the letter colour (d) colours behind the text
2. 2.⚖️ What colour is the text of this element?
   <p class="big" id="main">Hi</p>
   CSS:
   #main { color: black; }
   #main { color: orange; } (a) black (b) red (c) orange (d) green
3. 3.⚖️ What colour is the text of this element?
   <p class="menu" id="top">Hi</p>
   CSS:
   .menu { color: black; }
   .menu { color: orange; } (a) black (b) purple (c) orange (d) yellow
4. 4.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 150px;
     padding: 5px;
     border: 2px solid black;
     margin: 20px;
   }
5. 5.📱 The screen is 375px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 18px;
     }
   } (a) Yes (b) No
6. 6.✍️ What is the selector in this CSS rule?
   .box {
     color: red;
     font-weight: bold;
   } (a) bold (b) color (c) h2 (d) .box
7. 7.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 90px;
     padding: 5px;
     border: 2px solid black;
     margin: 5px;
   }
8. 8.🎯 Which sign starts an id selector? (a) # (b) & (c) @ (d) .
9. 9.🌈 In #000023 the blue part is the hex number 23. What is it as a normal number?
10. 10.⚖️ What colour is the text of this element?
    <p class="star" id="main">Hi</p>
    CSS:
    .star { color: black; }
    .star { color: orange; } (a) white (b) blue (c) orange (d) black
11. 11.⚖️ What colour is the text of this element?
    <h1 class="menu" id="top">Hi</h1>
    CSS:
    .menu { color: blue; }
    #top { color: yellow; } (a) yellow (b) blue (c) black (d) orange
12. 12.✍️ In color: blue; which part is the property? (a) color (b) ; (c) : (d) blue
13. 13.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) 600px or narrower (c) 600px or wider (d) turned off
14. 14.True or false: the content is space outside the border. (a) True (b) False
15. 15.📦 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: 15px;
      border: 3px solid black;
      margin: 15px;
    }
16. 16.🌈 Which hex code is blue? (a) #ffffff (b) #000000 (c) #ff00ff (d) #0000ff
17. 17.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 50px;
      padding: 15px;
      border: 5px solid black;
      margin: 0px;
    }
18. 18.🧩 Which language sets colours and fonts? (a) JavaScript (b) HTML (c) CSS
19. 19.Which of these is margin? (a) the text or picture (b) the gap to other boxes (c) a solid or dotted edge (d) space inside the border
20. 20.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 230px;
      padding: 15px;
      border: 2px solid black;
      margin: 20px;
    }
21. 21.🎯 Which element does the selector p style? (a) <h1> (b) <h2 class="note"> (c) <li id="top"> (d) <p class="note">
22. 22.🌈 In #009f00 the green part is the hex number 9f. What is it as a normal number?
23. 23.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
24. 24.🖌️ What colour is behind the letters?
    li {
      color: blue;
      font-size: 40px;
      text-align: center;
      background-color: yellow;
    } (a) yellow (b) red (c) blue
25. 25.🧩 Which language makes a form box? (a) JavaScript (b) HTML (c) CSS
26. 26.True or false: the border is the gap round content. (a) True (b) False
27. 27.What does justify-content: flex-end do? (a) puts boxes in the middle (b) packs boxes at the start (c) packs boxes at the end (d) equal gaps, none at ends
28. 28.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) black (c) green (d) red
29. 29.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the later one (c) the first one (d) the shorter one
30. 30.🔍 Which is the odd one out? (a) shows a pop-up message (b) reacts to a button click (c) counts down a timer (d) adds space around boxes
31. 31.📱 min-width: 800px applies when the screen is ___. (a) exactly 100px (b) turned off (c) 800px or narrower (d) 800px or wider
32. 32.💪 Which justify-content value packs boxes at the end? (a) flex-start (b) space-between (c) flex-end (d) center
33. 33.📦 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: 20px;
      border: 1px solid black;
      margin: 0px;
    }
34. 34.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 270px;
      padding: 30px;
      border: 3px solid black;
      margin: 10px;
    }
35. 35.✍️ CSS declarations go inside which brackets? (a) < > (b) [ ] (c) { } (d) ( )
36. 36.⚖️ What colour is the text of this element?
    <h2 class="star" id="top">Hi</h2>
    CSS:
    h2 { color: white; }
    #top { color: orange; } (a) blue (b) black (c) white (d) orange
37. 37.What does text-align do? (a) picks the font style (b) centres a heading (c) sets the letter colour (d) makes the text bold
38. 38.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 22px;
      }
    } (a) No (b) Yes
39. 39.🎯 Which CSS selector matches this element?
    <h1 class="box" id="intro">Hello</h1> (a) #box (b) .intro (c) .star (d) .box
40. 40.⚖️ What colour is the text of this element?
    <h1 class="box" id="top">Hi</h1>
    CSS:
    h1 { color: blue; }
    #top { color: green; } (a) blue (b) purple (c) green (d) orange

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