CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 906 · 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) an id selector (b) a class selector (c) an element selector
2. 2.📱 The screen is 375px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 20px;
     }
   } (a) No (b) Yes
3. 3.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 170px;
     justify-content: space-between;
   }
   Inside are 2 boxes, each 50px wide (no margins).
4. 4.⚖️ What colour is the text of this element?
   <h2 class="box" id="intro">Hi</h2>
   CSS:
   h2 { color: black; }
   h2 { color: orange; } (a) orange (b) black (c) green (d) red
5. 5.Which of these is the border? (a) space outside the border (b) the text or picture (c) the gap to other boxes (d) the line round the box
6. 6.🎨 A CSS file usually ends with which extension? (a) .html (b) .png (c) .css (d) .js
7. 7.✍️ In color: blue; which part is the property? (a) : (b) blue (c) color (d) ;
8. 8.True or false: #hero is an id selector. (a) True (b) False
9. 9.🖌️ What colour are the letters?
   h2 {
     text-align: left;
     color: orange;
     font-size: 36px;
     background-color: green;
   } (a) orange (b) red (c) green
10. 10.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 16px;
      }
    } (a) No (b) Yes
11. 11.📦 In the box model, which part is space outside the border? (a) content (b) border (c) padding (d) margin
12. 12.True or false: JavaScript makes a form box. (a) True (b) False
13. 13.💪 Which justify-content value packs boxes at the start? (a) space-between (b) center (c) flex-end (d) flex-start
14. 14.⚖️ What colour is the text of this element?
    <p class="red" id="main">Hi</p>
    CSS:
    #main { color: red; }
    .red { color: blue; } (a) green (b) red (c) white (d) blue
15. 15.🖌️ Which CSS property colours behind the text? (a) color (b) background-color (c) font-weight (d) font-family
16. 16.⚖️ What colour is the text of this element?
    <h2 class="red" id="hero">Hi</h2>
    CSS:
    .red { color: blue; }
    .red { color: green; } (a) green (b) black (c) blue (d) purple
17. 17.🎯 Which CSS selector matches this element?
    <div class="red" id="end">Hello</div> (a) .box (b) div (c) #red (d) span
18. 18.🎯 What kind of selector is h1? (a) an element selector (b) an id selector (c) a class selector
19. 19.⚖️ What colour is the text of this element?
    <h1 class="big" id="logo">Hi</h1>
    CSS:
    h1 { color: white; }
    h1 { color: black; } (a) white (b) red (c) green (d) black
20. 20.True or false: h1 is an id selector. (a) True (b) False
21. 21.True or false: margin is space outside the border. (a) False (b) True
22. 22.🎨 Which tag holds CSS inside the head? (a) <body> (b) <script> (c) <style> (d) <css>
23. 23.🎨 Which tag connects an outside CSS file? (a) <css> (b) <img> (c) <a> (d) <link>
24. 24.📦 In the box model, which part is the line round the box? (a) content (b) border (c) margin (d) padding
25. 25.True or false: the content is the gap round content. (a) True (b) False
26. 26.True or false: CSS checks a quiz answer. (a) True (b) False
27. 27.🖌️ Which CSS property makes the text bold? (a) color (b) background-color (c) font-size (d) font-weight
28. 28.🌈 Hex digits go 0 to 9, then A to which letter? (a) G (b) J (c) F (d) Z
29. 29.🌈 In #000000 the green part is the hex number 00. What is it as a normal number?
30. 30.What does font-family do? (a) colours behind the text (b) sets the letter colour (c) makes the text bold (d) picks the font style
31. 31.⚖️ What colour is the text of this element?
    <h2 class="box" id="main">Hi</h2>
    CSS:
    h2 { color: white; }
    h2 { color: red; } (a) green (b) red (c) yellow (d) white
32. 32.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 190px;
      padding: 5px;
      border: 1px solid black;
      margin: 15px;
    }
33. 33.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 6px;
      }
    }
34. 34.What does justify-content: space-between 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
35. 35.🔍 Which is the odd one out? (a) changes the text size (b) gives the page structure (c) adds space around boxes (d) lays out the page
36. 36.✍️ Which property is set to yellow in this rule?
    p {
      background-color: yellow;
      margin: 10px;
      padding: 8px;
      font-size: 20px;
    } (a) yellow (b) padding (c) background-color (d) margin
37. 37.🎯 Which CSS selector matches this element?
    <h2 class="red" id="main">Hello</h2> (a) h2 (b) #red (c) #logo (d) .main
38. 38.True or false: CSS sets colours and fonts. (a) True (b) False
39. 39.🖌️ Where does the text sit on its line?
    h1 {
      text-align: center;
      background-color: white;
      font-size: 36px;
      color: black;
    } (a) on the right (b) on the left (c) in the middle
40. 40.💪 Which justify-content value packs boxes at the end? (a) flex-end (b) flex-start (c) space-between (d) center

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