CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 731 · 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 lays out the page. (a) False (b) True
2. 2.📱 The screen is 1100px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 14px;
     }
   } (a) No (b) Yes
3. 3.🧩 Which language adds space around boxes? (a) CSS (b) HTML (c) JavaScript
4. 4.True or false: .note is an element selector. (a) True (b) False
5. 5.🧩 Which language makes headings and lists? (a) JavaScript (b) CSS (c) HTML
6. 6.🌈 In #0000a1 the blue part is the hex number a1. What is it as a normal number?
7. 7.✍️ What value is given to text-align in this rule?
   .note {
     border: 2px solid;
     width: 300px;
     text-align: center;
   } (a) yellow (b) 10px (c) text-align (d) center
8. 8.🌈 Which colour is #0000ff? (a) yellow (b) blue (c) cyan (d) red
9. 9.✍️ What value is given to border in this rule?
   h2 {
     border: 2px solid;
     text-align: center;
   } (a) 2px solid (b) 300px (c) border (d) italic
10. 10.⚖️ What colour is the text of this element?
    <p class="box" id="end">Hi</p>
    CSS:
    #end { color: blue; }
    #end { color: yellow; } (a) green (b) black (c) blue (d) yellow
11. 11.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) turned off (c) 600px or narrower (d) exactly 1000px
12. 12.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
13. 13.✍️ What is the selector in this CSS rule?
    h1 {
      background-color: yellow;
      width: 300px;
    } (a) p (b) 300px (c) h1 (d) background-color
14. 14.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 300px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 60px wide (no margins).
15. 15.🖌️ Which CSS property makes the text bold? (a) color (b) text-align (c) background-color (d) font-weight
16. 16.💪 Which flexbox property picks row or column? (a) justify-content (b) align-items (c) flex-direction (d) gap
17. 17.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 130px;
      padding: 5px;
      border: 3px solid black;
      margin: 20px;
    }
18. 18.⚖️ What colour is the text of this element?
    <h2 class="note" id="logo">Hi</h2>
    CSS:
    #logo { color: purple; }
    .note { color: black; }
    h2 { color: red; } (a) black (b) purple (c) red (d) green
19. 19.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 170px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 80px wide (no margins).
20. 20.What does color do? (a) makes the text bold (b) makes letters bigger (c) sets the letter colour (d) colours behind the text
21. 21.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 380px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 100px wide (no margins).
22. 22.🎯 What kind of selector is #logo? (a) a class selector (b) an id selector (c) an element selector
23. 23.🌈 Which colour of light is strongest in rgb(255, 45, 67)? (a) blue (b) green (c) red
24. 24.True or false: li is an element selector. (a) False (b) True
25. 25.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      background-color: yellow;
      border: 2px solid;
      font-size: 20px;
      margin: 10px;
    }
26. 26.🎯 Which element does the selector h2 style? (a) <span id="hero"> (b) <div class="big"> (c) <li> (d) <h2 class="big">
27. 27.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      margin: 10px;
      color: red;
    }
28. 28.Which of these is the border? (a) space outside the border (b) space inside the border (c) the gap round content (d) a solid or dotted edge
29. 29.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 470px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 80px wide (no margins).
30. 30.💪 Which justify-content value packs boxes at the end? (a) space-between (b) flex-end (c) flex-start (d) center
31. 31.True or false: CSS changes the text size. (a) False (b) True
32. 32.Which of these does JavaScript do? (a) lays out the page (b) checks a quiz answer (c) makes a link (d) gives the page structure
33. 33.📱 What does a media query check? (a) the time of day (b) the battery level (c) the screen width (d) the page title
34. 34.🔍 Which is the odd one out? (a) rounds box corners (b) sets colours and fonts (c) lays out the page (d) puts a picture on a page
35. 35.🎨 What does CSS stand for? (a) Creative Sheet System (b) Colourful Site Styles (c) Computer Style Sheets (d) Cascading Style Sheets
36. 36.🌈 In #00fb00 the green part is the hex number fb. What is it as a normal number?
37. 37.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 170px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 40px wide (no margins).
38. 38.🖌️ What colour are the letters?
    h1 {
      font-size: 12px;
      text-align: right;
      color: orange;
      background-color: red;
    } (a) red (b) orange (c) white
39. 39.🎨 Which tag holds CSS inside the head? (a) <css> (b) <script> (c) <style> (d) <body>
40. 40.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 14px;
      }
    }

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