CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 516 · 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.💪 Which flexbox property picks row or column? (a) gap (b) align-items (c) flex-direction (d) justify-content
2. 2.📱 What does a media query check? (a) the battery level (b) the page title (c) the screen width (d) the time of day
3. 3.True or false: margin is the gap to other boxes. (a) True (b) False
4. 4.🌈 Which colour is #ff00ff? (a) black (b) blue (c) magenta (d) red
5. 5.⚖️ What colour is the text of this element?
   <h2 class="red" id="intro">Hi</h2>
   CSS:
   h2 { color: blue; }
   h2 { color: white; } (a) blue (b) red (c) yellow (d) white
6. 6.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 290px;
     padding: 20px;
     border: 1px solid black;
     margin: 0px;
   }
7. 7.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 170px;
     justify-content: space-between;
   }
   Inside are 2 boxes, each 60px wide (no margins).
8. 8.True or false: .star is an element selector. (a) True (b) False
9. 9.True or false: margin is space inside the border. (a) False (b) True
10. 10.🖌️ What colour are the letters?
    li {
      color: white;
      font-size: 16px;
      background-color: orange;
      text-align: center;
    } (a) black (b) orange (c) white
11. 11.⚖️ What colour is the text of this element?
    <p class="red" id="main">Hi</p>
    CSS:
    p { color: red; }
    p { color: white; } (a) red (b) yellow (c) white (d) green
12. 12.🖌️ Which CSS property centres a heading? (a) background-color (b) text-align (c) color (d) font-weight
13. 13.📱 max-width: 600px applies when the screen is ___. (a) turned off (b) exactly 1000px (c) 600px or narrower (d) 600px or wider
14. 14.🌈 What is the biggest number one colour can have in rgb()? (a) 1000 (b) 100 (c) 99 (d) 255
15. 15.🖌️ What colour are the letters?
    p {
      font-size: 28px;
      background-color: red;
      color: orange;
      text-align: center;
    } (a) yellow (b) orange (c) red
16. 16.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
17. 17.🎨 What does CSS stand for? (a) Colourful Site Styles (b) Cascading Style Sheets (c) Computer Style Sheets (d) Creative Sheet System
18. 18.⚖️ What colour is the text of this element?
    <h1 class="note" id="top">Hi</h1>
    CSS:
    .note { color: green; }
    .note { color: orange; } (a) red (b) green (c) purple (d) orange
19. 19.Which of these is padding? (a) the text or picture (b) the gap round content (c) space outside the border (d) the line round the box
20. 20.✍️ What value is given to margin in this rule?
    .note {
      background-color: yellow;
      margin: 10px;
      text-align: center;
    } (a) 8px (b) 10px (c) margin (d) bold
21. 21.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 110px;
      padding: 15px;
      border: 3px solid black;
      margin: 0px;
    }
22. 22.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 240px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 80px wide (no margins).
23. 23.🖌️ Where does the text sit on its line?
    h1 {
      font-size: 28px;
      text-align: left;
      color: blue;
      background-color: purple;
    } (a) on the right (b) on the left (c) in the middle
24. 24.📱 Responsive design means a page ___. (a) fits every screen (b) has no pictures (c) never changes (d) is only for laptops
25. 25.What does font-weight do? (a) sets the letter colour (b) centres a heading (c) picks the font style (d) makes the text bold
26. 26.📦 In the box model, which part is the gap to other boxes? (a) padding (b) content (c) margin (d) border
27. 27.⚖️ What colour is the text of this element?
    <p class="note" id="top">Hi</p>
    CSS:
    .note { color: yellow; }
    #top { color: purple; }
    p { color: white; } (a) white (b) purple (c) yellow (d) green
28. 28.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 190px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 40px wide (no margins).
29. 29.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) center (c) flex-start (d) space-between
30. 30.⚖️ What colour is the text of this element?
    <h1 class="note" id="hero">Hi</h1>
    CSS:
    #hero { color: red; }
    #hero { color: orange; } (a) red (b) black (c) blue (d) orange
31. 31.🖌️ What colour are the letters?
    p {
      background-color: blue;
      color: red;
      text-align: center;
      font-size: 16px;
    } (a) purple (b) red (c) blue
32. 32.🧩 Which language changes the text size? (a) JavaScript (b) HTML (c) CSS
33. 33.⚖️ What colour is the text of this element?
    <h1 class="box" id="logo">Hi</h1>
    CSS:
    h1 { color: blue; }
    h1 { color: purple; } (a) blue (b) orange (c) purple (d) red
34. 34.🎯 Which sign starts a class selector? (a) & (b) # (c) @ (d) .
35. 35.🧩 Which language counts down a timer? (a) CSS (b) HTML (c) JavaScript
36. 36.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
37. 37.🔍 Which is the odd one out? (a) puts a picture on a page (b) gives the page structure (c) checks a quiz answer (d) makes headings and lists
38. 38.🌈 Which colour of light is strongest in rgb(90, 3, 175)? (a) blue (b) green (c) red
39. 39.Which of these does HTML do? (a) makes a link (b) changes the page live (c) shows a pop-up message (d) reacts to a button click
40. 40.Which of these is the border? (a) the line round the box (b) space inside the border (c) the gap to other boxes (d) the gap round content

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