CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 700 · 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: JavaScript makes a link. (a) True (b) False
2. 2.⚖️ What colour is the text of this element?
   <h1 class="star" id="intro">Hi</h1>
   CSS:
   .star { color: red; }
   #intro { color: yellow; }
   h1 { color: green; } (a) red (b) green (c) yellow (d) purple
3. 3.🌈 Which colour of light is strongest in rgb(27, 214, 72)? (a) blue (b) red (c) green
4. 4.📱 The screen is 540px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 8px;
     }
   } (a) No (b) Yes
5. 5.🎯 Which element does the selector #hero style? (a) <li class="hero"> (b) <li id="top"> (c) <li id="hero"> (d) <div class="note">
6. 6.✍️ What is the selector in this CSS rule?
   p {
     color: red;
     padding: 8px;
     margin: 10px;
     font-style: italic;
   } (a) color (b) p (c) 8px (d) .note
7. 7.🔍 Which is the odd one out? (a) counts down a timer (b) checks a quiz answer (c) reacts to a button click (d) makes a form box
8. 8.⚖️ What colour is the text of this element?
   <p class="menu" id="end">Hi</p>
   CSS:
   .menu { color: green; }
   #end { color: black; } (a) green (b) orange (c) black (d) red
9. 9.🖌️ What colour is behind the letters?
   p {
     background-color: black;
     text-align: center;
     color: red;
     font-size: 16px;
   } (a) white (b) red (c) black
10. 10.📱 What does a media query check? (a) the battery level (b) the page title (c) the screen width (d) the time of day
11. 11.✍️ Which property is set to 10px in this rule?
    .note {
      margin: 10px;
      background-color: yellow;
      color: red;
    } (a) margin (b) padding (c) font-weight (d) 10px
12. 12.⚖️ What colour is the text of this element?
    <h1 class="note" id="intro">Hi</h1>
    CSS:
    #intro { color: white; }
    #intro { color: red; } (a) green (b) red (c) white (d) orange
13. 13.🌈 Which colour of light is strongest in rgb(119, 58, 191)? (a) green (b) red (c) blue
14. 14.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 240px;
      padding: 10px;
      border: 4px solid black;
      margin: 5px;
    }
15. 15.True or false: .big is a class selector. (a) False (b) True
16. 16.🖌️ What colour are the letters?
    h2 {
      background-color: green;
      text-align: left;
      font-size: 40px;
      color: white;
    } (a) white (b) green (c) blue
17. 17.🌈 Which colour of light is strongest in rgb(168, 23, 30)? (a) green (b) blue (c) red
18. 18.⚖️ What colour is the text of this element?
    <p class="box" id="main">Hi</p>
    CSS:
    p { color: green; }
    p { color: blue; } (a) orange (b) blue (c) green (d) red
19. 19.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) packs boxes at the end (c) packs boxes at the start (d) puts boxes in the middle
20. 20.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 110px;
      padding: 25px;
      border: 3px solid black;
      margin: 15px;
    }
21. 21.🖌️ Which CSS property sets the letter colour? (a) text-align (b) background-color (c) color (d) font-size
22. 22.🖌️ Which CSS property picks the font style? (a) background-color (b) color (c) font-family (d) font-weight
23. 23.🖌️ What colour is behind the letters?
    h1 {
      background-color: orange;
      color: black;
      text-align: right;
      font-size: 32px;
    } (a) orange (b) black (c) blue
24. 24.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 200px;
      padding: 10px;
      border: 3px solid black;
      margin: 10px;
    }
25. 25.✍️ Which sign ends each CSS declaration? (a) : (b) , (c) . (d) ;
26. 26.✍️ How does a CSS comment start? (a) <!-- (b) /* (c) // (d) #
27. 27.True or false: the border is the line round the box. (a) False (b) True
28. 28.🌈 Which colour is rgb(0, 255, 255)? (a) magenta (b) cyan (c) blue (d) red
29. 29.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 22px;
      }
    }
30. 30.✍️ What value is given to font-size in this rule?
    li {
      font-size: 20px;
      margin: 10px;
      background-color: yellow;
      text-align: center;
    } (a) 20px (b) font-size (c) yellow (d) center
31. 31.🌈 Which colour is rgb(255, 0, 255)? (a) blue (b) magenta (c) black (d) yellow
32. 32.🌈 Which colour of light is strongest in rgb(111, 17, 225)? (a) red (b) green (c) blue
33. 33.🌈 In #ef0000 the red part is the hex number ef. What is it as a normal number?
34. 34.🧩 Which language changes the text size? (a) HTML (b) JavaScript (c) CSS
35. 35.🧩 Which language reacts to a button click? (a) CSS (b) HTML (c) JavaScript
36. 36.Which of these does HTML do? (a) changes the page live (b) counts down a timer (c) lays out the page (d) makes a link
37. 37.Which of these does CSS do? (a) makes headings and lists (b) counts down a timer (c) makes a form box (d) changes the text size
38. 38.Which of these does HTML do? (a) makes a form box (b) lays out the page (c) changes the page live (d) shows a pop-up message
39. 39.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      background-color: yellow;
    }
40. 40.What does font-weight do? (a) makes the text bold (b) makes letters bigger (c) picks the font style (d) sets the letter colour

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