CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 868 · 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.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) 800px or wider (c) exactly 100px (d) turned off
2. 2.Which of these does JavaScript do? (a) gives the page structure (b) changes the page live (c) makes a link (d) makes headings and lists
3. 3.📱 The screen is 700px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 32px;
     }
   } (a) Yes (b) No
4. 4.🌈 Which hex code is bright green? (a) #ff0000 (b) #0000ff (c) #00ff00 (d) #ff00ff
5. 5.🎨 Which tag connects an outside CSS file? (a) <css> (b) <img> (c) <link> (d) <a>
6. 6.🖌️ Where does the text sit on its line?
   h2 {
     text-align: right;
     color: green;
     background-color: red;
     font-size: 16px;
   } (a) in the middle (b) on the left (c) on the right
7. 7.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 320px;
     justify-content: center;
   }
   Inside are 4 boxes, each 60px wide (no margins).
8. 8.🎯 Which CSS selector matches this element?
   <li class="note" id="intro">Hello</li> (a) .intro (b) #intro (c) #note (d) #main
9. 9.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 6px;
     }
   }
10. 10.🖌️ Which CSS property makes letters bigger? (a) color (b) font-size (c) font-weight (d) text-align
11. 11.🎯 Which CSS selector matches this element?
    <h1 class="star" id="hero">Hello</h1> (a) h2 (b) #star (c) .star (d) .hero
12. 12.✍️ In color: blue; which part is the property? (a) ; (b) : (c) color (d) blue
13. 13.⚖️ Which selector is the weakest? (a) an element selector (b) an id selector (c) a class selector
14. 14.🎯 What kind of selector is body? (a) a class selector (b) an element selector (c) an id selector
15. 15.True or false: the border is the gap to other boxes. (a) True (b) False
16. 16.🖌️ What colour is behind the letters?
    h2 {
      text-align: right;
      background-color: red;
      font-size: 12px;
      color: white;
    } (a) white (b) blue (c) red
17. 17.🎯 Which sign starts an id selector? (a) & (b) @ (c) . (d) #
18. 18.🎯 Which element does the selector #intro style? (a) <p class="intro"> (b) <p id="main"> (c) <p id="intro"> (d) <h1 class="menu">
19. 19.True or false: margin is a solid or dotted edge. (a) True (b) False
20. 20.⚖️ What colour is the text of this element?
    <h1 class="big" id="top">Hi</h1>
    CSS:
    .big { color: blue; }
    .big { color: black; } (a) red (b) white (c) black (d) blue
21. 21.🎯 Which element does the selector h1 style? (a) <li class="box"> (b) <div id="end"> (c) <h1 class="box"> (d) <h2>
22. 22.🎯 What kind of selector is .star? (a) an element selector (b) an id selector (c) a class selector
23. 23.🖌️ Where does the text sit on its line?
    p {
      font-size: 20px;
      color: red;
      text-align: center;
      background-color: green;
    } (a) in the middle (b) on the left (c) on the right
24. 24.What does color do? (a) sets the letter colour (b) picks the font style (c) centres a heading (d) makes the text bold
25. 25.🌈 Which colour of light is strongest in rgb(8, 205, 89)? (a) red (b) green (c) blue
26. 26.⚖️ What colour is the text of this element?
    <h2 class="star" id="hero">Hi</h2>
    CSS:
    .star { color: purple; }
    .star { color: black; } (a) purple (b) black (c) yellow (d) red
27. 27.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 190px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 60px wide (no margins).
28. 28.🎯 Which element does the selector .note style? (a) <h1 id="note"> (b) <h1 class="note"> (c) <h1 class="big"> (d) <h2 class="red">
29. 29.🎯 Which CSS selector matches this element?
    <span class="big" id="main">Hello</span> (a) span (b) .main (c) #logo (d) p
30. 30.True or false: HTML makes a link. (a) False (b) True
31. 31.⚖️ What colour is the text of this element?
    <h2 class="note" id="top">Hi</h2>
    CSS:
    .note { color: red; }
    h2 { color: white; } (a) black (b) purple (c) red (d) white
32. 32.🖌️ Which CSS property sets the letter colour? (a) font-family (b) text-align (c) font-size (d) color
33. 33.⚖️ What colour is the text of this element?
    <h1 class="big" id="intro">Hi</h1>
    CSS:
    #intro { color: white; }
    h1 { color: blue; } (a) white (b) blue (c) green (d) orange
34. 34.Which of these is the border? (a) space inside the border (b) the text or picture (c) space outside the border (d) a solid or dotted edge
35. 35.🌈 Which colour is #000000? (a) blue (b) yellow (c) bright green (d) black
36. 36.🔍 Which is the odd one out? (a) adds space around boxes (b) gives the page structure (c) makes headings and lists (d) puts a picture on a page
37. 37.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 12px;
      }
    }
38. 38.💪 Which flexbox property turns on flexbox? (a) flex-direction (b) justify-content (c) align-items (d) display: flex
39. 39.🎯 Which sign starts a class selector? (a) & (b) # (c) @ (d) .
40. 40.✍️ Which property is set to 10px in this rule?
    .box {
      padding: 8px;
      background-color: yellow;
      margin: 10px;
      font-weight: bold;
    } (a) 10px (b) margin (c) padding (d) font-weight

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