CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 206 · 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.True or false: CSS makes a form box. (a) False (b) True
2. 2.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 350px;
     justify-content: space-between;
   }
   Inside are 4 boxes, each 50px wide (no margins).
3. 3.⚖️ What colour is the text of this element?
   <h2 class="box" id="hero">Hi</h2>
   CSS:
   .box { color: purple; }
   #hero { color: orange; }
   h2 { color: yellow; } (a) purple (b) orange (c) black (d) yellow
4. 4.📦 In the box model, which part is a solid or dotted edge? (a) border (b) content (c) margin (d) padding
5. 5.Which of these does JavaScript do? (a) changes the page live (b) changes the text size (c) makes headings and lists (d) rounds box corners
6. 6.What does background-color do? (a) picks the font style (b) sets the letter colour (c) makes the text bold (d) colours behind the text
7. 7.🎯 Which CSS selector matches this element?
   <span class="star" id="end">Hello</span> (a) p (b) .end (c) .star (d) #star
8. 8.🔍 Which is the odd one out? (a) adds space around boxes (b) rounds box corners (c) lays out the page (d) shows a pop-up message
9. 9.✍️ CSS declarations go inside which brackets? (a) < > (b) ( ) (c) { } (d) [ ]
10. 10.✍️ Which sign goes between a property and its value? (a) ; (b) = (c) : (d) -
11. 11.🎨 A CSS file usually ends with which extension? (a) .png (b) .html (c) .js (d) .css
12. 12.💪 Which justify-content value equal gaps, none at ends? (a) flex-end (b) space-between (c) center (d) flex-start
13. 13.True or false: JavaScript checks a quiz answer. (a) True (b) False
14. 14.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the shorter one (c) neither (d) the later one
15. 15.🖌️ How big is the text, in px?
    h2 {
      text-align: right;
      background-color: green;
      font-size: 16px;
      color: white;
    }
16. 16.🔍 Which is the odd one out? (a) makes a link (b) puts a picture on a page (c) makes headings and lists (d) adds space around boxes
17. 17.📱 Responsive design means a page ___. (a) never changes (b) is only for laptops (c) fits every screen (d) has no pictures
18. 18.🎯 What kind of selector is .note? (a) an element selector (b) a class selector (c) an id selector
19. 19.🌈 Which colour is rgb(255, 255, 0)? (a) magenta (b) yellow (c) red (d) white
20. 20.🎯 Which element does the selector .big style? (a) <div id="big"> (b) <div class="red"> (c) <div class="big"> (d) <span class="box">
21. 21.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      font-style: italic;
      color: red;
      padding: 8px;
    }
22. 22.True or false: CSS adds space around boxes. (a) False (b) True
23. 23.✍️ What value is given to text-align in this rule?
    p {
      font-size: 20px;
      color: red;
      border: 2px solid;
      text-align: center;
    } (a) center (b) 10px (c) yellow (d) text-align
24. 24.✍️ Which sign ends each CSS declaration? (a) ; (b) . (c) , (d) :
25. 25.💪 Which flexbox property lines boxes up across? (a) justify-content (b) flex-direction (c) gap (d) align-items
26. 26.📦 In the box model, which part is space outside the border? (a) border (b) content (c) padding (d) margin
27. 27.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 18px;
      }
    }
28. 28.🌈 Which colour is #00ffff? (a) magenta (b) red (c) cyan (d) white
29. 29.✍️ What is the selector in this CSS rule?
    .box {
      color: red;
      font-weight: bold;
      background-color: yellow;
    } (a) h2 (b) color (c) .box (d) bold
30. 30.✍️ What is the selector in this CSS rule?
    body {
      padding: 8px;
      color: red;
      text-align: center;
    } (a) padding (b) .box (c) body (d) red
31. 31.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 240px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 80px wide (no margins).
32. 32.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 40px;
      padding: 30px;
      border: 4px solid black;
      margin: 0px;
    }
33. 33.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    }
34. 34.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      font-style: italic;
    }
35. 35.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 22px;
      }
    }
36. 36.🎯 Which element does the selector span style? (a) <h2 id="top"> (b) <span class="box"> (c) <p> (d) <h1 class="box">
37. 37.🖌️ Which CSS property sets the letter colour? (a) color (b) background-color (c) font-size (d) font-weight
38. 38.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 150px;
      padding: 30px;
      border: 4px solid black;
      margin: 10px;
    }
39. 39.⚖️ What colour is the text of this element?
    <p class="box" id="logo">Hi</p>
    CSS:
    .box { color: orange; }
    p { color: black; }
    #logo { color: green; } (a) orange (b) black (c) green (d) yellow
40. 40.🖌️ How big is the text, in px?
    h1 {
      font-size: 16px;
      background-color: white;
      text-align: right;
      color: blue;
    }

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