CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 9 · 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) color (b) : (c) ; (d) blue
2. 2.🔍 Which is the odd one out? (a) changes the text size (b) adds space around boxes (c) lays out the page (d) gives the page structure
3. 3.✍️ CSS declarations go inside which brackets? (a) [ ] (b) { } (c) < > (d) ( )
4. 4.⚖️ What colour is the text of this element?
   <h1 class="big" id="logo">Hi</h1>
   CSS:
   #logo { color: white; }
   #logo { color: blue; } (a) blue (b) red (c) green (d) white
5. 5.🖌️ What colour is behind the letters?
   h2 {
     background-color: purple;
     font-size: 24px;
     text-align: right;
     color: orange;
   } (a) green (b) purple (c) orange
6. 6.🖌️ How big is the text, in px?
   p {
     text-align: left;
     font-size: 16px;
     color: black;
     background-color: green;
   }
7. 7.🎨 Which tag connects an outside CSS file? (a) <css> (b) <a> (c) <link> (d) <img>
8. 8.📱 The screen is 320px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 18px;
     }
   } (a) No (b) Yes
9. 9.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 16px;
     }
   }
10. 10.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 22px;
      }
    }
11. 11.✍️ What value is given to margin in this rule?
    .box {
      width: 300px;
      font-size: 20px;
      margin: 10px;
      background-color: yellow;
    } (a) bold (b) 10px (c) 8px (d) margin
12. 12.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 22px;
      }
    } (a) No (b) Yes
13. 13.Which of these is the border? (a) the line round the box (b) space outside the border (c) space inside the border (d) the gap round content
14. 14.🌈 In #df0000 the red part is the hex number df. What is it as a normal number?
15. 15.True or false: the border is the gap round content. (a) True (b) False
16. 16.⚖️ What colour is the text of this element?
    <h2 class="box" id="main">Hi</h2>
    CSS:
    #main { color: orange; }
    #main { color: white; } (a) blue (b) red (c) white (d) orange
17. 17.🎯 Which sign starts a class selector? (a) # (b) & (c) . (d) @
18. 18.⚖️ What colour is the text of this element?
    <p class="star" id="intro">Hi</p>
    CSS:
    p { color: orange; }
    .star { color: yellow; }
    #intro { color: green; } (a) green (b) yellow (c) orange (d) blue
19. 19.🔍 Which is the odd one out? (a) makes headings and lists (b) reacts to a button click (c) puts a picture on a page (d) makes a form box
20. 20.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      font-style: italic;
      border: 2px solid;
      text-align: center;
    }
21. 21.🎨 What does CSS stand for? (a) Colourful Site Styles (b) Computer Style Sheets (c) Creative Sheet System (d) Cascading Style Sheets
22. 22.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      border: 2px solid;
    }
23. 23.🎯 Can many elements share the same class? (a) No (b) Yes
24. 24.🌈 Hex digits go 0 to 9, then A to which letter? (a) F (b) Z (c) G (d) J
25. 25.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 210px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 100px wide (no margins).
26. 26.🎨 A CSS file usually ends with which extension? (a) .png (b) .js (c) .html (d) .css
27. 27.Which of these does JavaScript do? (a) gives the page structure (b) lays out the page (c) reacts to a button click (d) puts a picture on a page
28. 28.✍️ In color: blue; which part is the property? (a) ; (b) : (c) blue (d) color
29. 29.True or false: padding is a solid or dotted edge. (a) False (b) True
30. 30.True or false: img is an element selector. (a) False (b) True
31. 31.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      margin: 10px;
    }
32. 32.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) turned off (c) exactly 100px (d) 800px or wider
33. 33.✍️ Which sign ends each CSS declaration? (a) : (b) , (c) . (d) ;
34. 34.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 24px;
      }
    }
35. 35.✍️ Which sign goes between a property and its value? (a) ; (b) : (c) - (d) =
36. 36.🎯 Which element does the selector .note style? (a) <h1 class="red"> (b) <p class="note"> (c) <p class="big"> (d) <p id="note">
37. 37.Which of these is padding? (a) the line round the box (b) the gap to other boxes (c) space inside the border (d) space outside the border
38. 38.⚖️ What colour is the text of this element?
    <p class="box" id="end">Hi</p>
    CSS:
    p { color: green; }
    p { color: blue; } (a) blue (b) green (c) orange (d) purple
39. 39.🌈 Which colour of light is strongest in rgb(245, 30, 113)? (a) blue (b) red (c) green
40. 40.Which of these is the content? (a) the text or picture (b) the gap round content (c) space inside the border (d) a solid or dotted edge

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