CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 767 · 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: li is an element selector. (a) True (b) False
2. 2.True or false: p is an element selector. (a) True (b) False
3. 3.⚖️ What colour is the text of this element?
   <h2 class="menu" id="logo">Hi</h2>
   CSS:
   h2 { color: blue; }
   h2 { color: yellow; } (a) green (b) yellow (c) orange (d) blue
4. 4.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 16px;
     }
   }
5. 5.✍️ How does a CSS comment start? (a) <!-- (b) // (c) /* (d) #
6. 6.🌈 Which colour is rgb(0, 0, 255)? (a) white (b) cyan (c) blue (d) magenta
7. 7.Which of these is the border? (a) the gap to other boxes (b) the gap round content (c) the line round the box (d) space inside the border
8. 8.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the later one (c) neither (d) the first one
9. 9.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 300px;
     padding: 5px;
     border: 1px solid black;
     margin: 20px;
   }
10. 10.🎨 What does CSS stand for? (a) Creative Sheet System (b) Colourful Site Styles (c) Cascading Style Sheets (d) Computer Style Sheets
11. 11.🌈 In #000090 the blue part is the hex number 90. What is it as a normal number?
12. 12.🎯 What kind of selector is img? (a) an id selector (b) a class selector (c) an element selector
13. 13.🖌️ How big is the text, in px?
    h1 {
      text-align: left;
      font-size: 32px;
      background-color: white;
      color: blue;
    }
14. 14.⚖️ What colour is the text of this element?
    <h1 class="star" id="intro">Hi</h1>
    CSS:
    #intro { color: black; }
    h1 { color: red; } (a) red (b) white (c) black (d) yellow
15. 15.✍️ What is the selector in this CSS rule?
    h1 {
      padding: 8px;
      margin: 10px;
      border: 2px solid;
      font-size: 20px;
    } (a) p (b) padding (c) 10px (d) h1
16. 16.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 28px;
      }
    }
17. 17.True or false: CSS makes a form box. (a) False (b) True
18. 18.True or false: p is a class selector. (a) True (b) False
19. 19.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      margin: 10px;
      font-style: italic;
    }
20. 20.🌈 Which colour of light is strongest in rgb(32, 166, 41)? (a) blue (b) red (c) green
21. 21.🖌️ How big is the text, in px?
    li {
      color: red;
      background-color: white;
      font-size: 16px;
      text-align: center;
    }
22. 22.🖌️ What colour are the letters?
    p {
      color: white;
      font-size: 36px;
      background-color: red;
      text-align: right;
    } (a) orange (b) red (c) white
23. 23.📱 What does a media query check? (a) the time of day (b) the screen width (c) the page title (d) the battery level
24. 24.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 28px;
      }
    }
25. 25.🖌️ How big is the text, in px?
    p {
      background-color: blue;
      text-align: left;
      font-size: 28px;
      color: purple;
    }
26. 26.⚖️ What colour is the text of this element?
    <h1 class="note" id="logo">Hi</h1>
    CSS:
    .note { color: red; }
    .note { color: orange; } (a) white (b) red (c) green (d) orange
27. 27.🎯 What kind of selector is .card? (a) a class selector (b) an element selector (c) an id selector
28. 28.Which of these is padding? (a) the gap to other boxes (b) the line round the box (c) space outside the border (d) the gap round content
29. 29.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      border: 2px solid;
    }
30. 30.🖌️ How big is the text, in px?
    li {
      background-color: white;
      color: green;
      font-size: 28px;
      text-align: center;
    }
31. 31.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
32. 32.⚖️ What colour is the text of this element?
    <h2 class="note" id="main">Hi</h2>
    CSS:
    h2 { color: blue; }
    h2 { color: yellow; } (a) blue (b) white (c) yellow (d) orange
33. 33.🎯 Which element does the selector .star style? (a) <h1 class="star"> (b) <h1 id="star"> (c) <h2 class="note"> (d) <h1 class="menu">
34. 34.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 220px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 100px wide (no margins).
35. 35.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: center;
    }
    Inside are 2 boxes, each 100px wide (no margins).
36. 36.🎨 One CSS file can style how many pages? (a) no pages (b) only one word (c) only one image (d) many pages
37. 37.⚖️ What colour is the text of this element?
    <h1 class="red" id="intro">Hi</h1>
    CSS:
    .red { color: red; }
    .red { color: black; } (a) black (b) red (c) orange (d) yellow
38. 38.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 210px;
      padding: 30px;
      border: 3px solid black;
      margin: 10px;
    }
39. 39.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) turned off (c) 800px or narrower (d) exactly 100px
40. 40.🧩 Which language changes the text size? (a) HTML (b) CSS (c) JavaScript

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