CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 496 · 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.✍️ In color: blue; which part is the value? (a) blue (b) color (c) ; (d) :
2. 2.✍️ Which property is set to 20px in this rule?
   body {
     font-size: 20px;
     border: 2px solid;
     text-align: center;
     width: 300px;
   } (a) font-size (b) text-align (c) background-color (d) 20px
3. 3.📦 In the box model, which part is space outside the border? (a) padding (b) margin (c) border (d) content
4. 4.🌈 Which colour is #ff00ff? (a) red (b) magenta (c) cyan (d) yellow
5. 5.🔍 Which is the odd one out? (a) sets colours and fonts (b) adds space around boxes (c) makes headings and lists (d) rounds box corners
6. 6.✍️ How many declarations (property: value pairs) are in this rule?
   li {
     margin: 10px;
     font-size: 20px;
     color: red;
   }
7. 7.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 10px;
     }
   }
8. 8.🎨 Which tag connects an outside CSS file? (a) <a> (b) <link> (c) <img> (d) <css>
9. 9.True or false: .note is a class selector. (a) True (b) False
10. 10.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 140px;
      padding: 15px;
      border: 3px solid black;
      margin: 20px;
    }
11. 11.🖌️ How big is the text, in px?
    h2 {
      font-size: 36px;
      text-align: right;
      background-color: blue;
      color: red;
    }
12. 12.True or false: JavaScript makes headings and lists. (a) True (b) False
13. 13.🧩 Which language adds space around boxes? (a) JavaScript (b) CSS (c) HTML
14. 14.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 20px;
      }
    }
15. 15.⚖️ What colour is the text of this element?
    <h2 class="red" id="main">Hi</h2>
    CSS:
    h2 { color: black; }
    h2 { color: red; } (a) red (b) black (c) white (d) purple
16. 16.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the later one (c) neither (d) the shorter one
17. 17.True or false: padding is the gap round content. (a) True (b) False
18. 18.🖌️ Where does the text sit on its line?
    li {
      text-align: right;
      background-color: yellow;
      font-size: 16px;
      color: black;
    } (a) on the right (b) on the left (c) in the middle
19. 19.✍️ What is the selector in this CSS rule?
    h1 {
      border: 2px solid;
      margin: 10px;
    } (a) border (b) 10px (c) h1 (d) p
20. 20.⚖️ What colour is the text of this element?
    <h1 class="menu" id="end">Hi</h1>
    CSS:
    #end { color: black; }
    #end { color: orange; } (a) orange (b) black (c) red (d) white
21. 21.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
22. 22.💪 Which justify-content value packs boxes at the end? (a) space-between (b) flex-end (c) center (d) flex-start
23. 23.🌈 What is the biggest number one colour can have in rgb()? (a) 255 (b) 99 (c) 100 (d) 1000
24. 24.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 20px;
      }
    }
25. 25.✍️ In color: blue; which part is the property? (a) : (b) color (c) blue (d) ;
26. 26.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 170px;
      padding: 15px;
      border: 2px solid black;
      margin: 0px;
    }
27. 27.📦 In the box model, which part is space inside the border? (a) padding (b) margin (c) content (d) border
28. 28.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 280px;
      padding: 30px;
      border: 3px solid black;
      margin: 5px;
    }
29. 29.✍️ How does a CSS comment start? (a) /* (b) <!-- (c) // (d) #
30. 30.True or false: the content is the gap to other boxes. (a) False (b) True
31. 31.What does text-align do? (a) colours behind the text (b) makes the text bold (c) makes letters bigger (d) centres a heading
32. 32.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the start (d) packs boxes at the end
33. 33.⚖️ What colour is the text of this element?
    <h1 class="box" id="intro">Hi</h1>
    CSS:
    #intro { color: yellow; }
    .box { color: purple; } (a) blue (b) yellow (c) red (d) purple
34. 34.Which of these does JavaScript do? (a) gives the page structure (b) counts down a timer (c) adds space around boxes (d) makes a form box
35. 35.🎯 Which CSS selector matches this element?
    <h1 class="menu" id="logo">Hello</h1> (a) .menu (b) #menu (c) .note (d) h2
36. 36.✍️ What is the selector in this CSS rule?
    .note {
      font-style: italic;
      margin: 10px;
    } (a) #top (b) .note (c) 10px (d) font-style
37. 37.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 50px wide (no margins).
38. 38.Which of these does JavaScript do? (a) changes the text size (b) reacts to a button click (c) rounds box corners (d) adds space around boxes
39. 39.Which of these is the content? (a) the gap round content (b) the line round the box (c) space inside the border (d) the text or picture
40. 40.💪 Which justify-content value packs boxes at the start? (a) center (b) space-between (c) flex-end (d) flex-start

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