CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 905 · 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 CSS selector matches this element?
   <span class="red" id="intro">Hello</span> (a) p (b) #main (c) #red (d) #intro
2. 2.🖌️ What colour are the letters?
   li {
     background-color: white;
     color: orange;
     text-align: right;
     font-size: 40px;
   } (a) white (b) orange (c) yellow
3. 3.✍️ Which sign goes between a property and its value? (a) = (b) : (c) - (d) ;
4. 4.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 10px;
     }
   }
5. 5.💪 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).
6. 6.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) black (c) green (d) blue
7. 7.True or false: the content is the line round the box. (a) True (b) False
8. 8.🎯 Can many elements share the same class? (a) No (b) Yes
9. 9.🎨 Which tag holds CSS inside the head? (a) <css> (b) <style> (c) <script> (d) <body>
10. 10.🔍 Which is the odd one out? (a) makes a link (b) gives the page structure (c) makes headings and lists (d) changes the text size
11. 11.✍️ What value is given to font-style in this rule?
    li {
      font-style: italic;
      color: red;
    } (a) red (b) 20px (c) italic (d) font-style
12. 12.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      font-size: 20px;
      background-color: yellow;
    }
13. 13.🎯 Which sign starts a class selector? (a) @ (b) . (c) & (d) #
14. 14.⚖️ What colour is the text of this element?
    <p class="star" id="top">Hi</p>
    CSS:
    p { color: red; }
    #top { color: white; } (a) white (b) red (c) yellow (d) purple
15. 15.🌈 Which colour of light is strongest in rgb(35, 13, 222)? (a) blue (b) green (c) red
16. 16.What does font-size do? (a) makes letters bigger (b) sets the letter colour (c) makes the text bold (d) centres a heading
17. 17.📱 What does a media query check? (a) the battery level (b) the screen width (c) the time of day (d) the page title
18. 18.🖌️ What colour is behind the letters?
    h1 {
      font-size: 12px;
      background-color: red;
      color: blue;
      text-align: left;
    } (a) red (b) blue (c) yellow
19. 19.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 28px;
      }
    } (a) Yes (b) No
20. 20.🔍 Which is the odd one out? (a) adds space around boxes (b) rounds box corners (c) reacts to a button click (d) changes the text size
21. 21.🖌️ What colour are the letters?
    h2 {
      background-color: red;
      text-align: left;
      font-size: 12px;
      color: orange;
    } (a) orange (b) black (c) red
22. 22.🖌️ Which CSS property sets the letter colour? (a) font-family (b) color (c) font-size (d) text-align
23. 23.Which of these is the content? (a) space inside the border (b) the text or picture (c) the gap round content (d) the line round the box
24. 24.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 22px;
      }
    }
25. 25.What does text-align do? (a) picks the font style (b) colours behind the text (c) centres a heading (d) makes letters bigger
26. 26.🔍 Which is the odd one out? (a) checks a quiz answer (b) changes the page live (c) counts down a timer (d) makes a form box
27. 27.🌈 In #0000ce the blue part is the hex number ce. What is it as a normal number?
28. 28.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 220px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 80px wide (no margins).
29. 29.🖌️ What colour are the letters?
    li {
      color: purple;
      text-align: center;
      background-color: black;
      font-size: 36px;
    } (a) black (b) white (c) purple
30. 30.⚖️ Which selector is the strongest? (a) a class selector (b) an element selector (c) an id selector
31. 31.⚖️ What colour is the text of this element?
    <h1 class="red" id="hero">Hi</h1>
    CSS:
    h1 { color: orange; }
    #hero { color: blue; } (a) black (b) orange (c) blue (d) white
32. 32.What does background-color do? (a) makes the text bold (b) colours behind the text (c) picks the font style (d) sets the letter colour
33. 33.🌈 Which hex code is magenta? (a) #00ff00 (b) #ffff00 (c) #ff00ff (d) #0000ff
34. 34.✍️ CSS declarations go inside which brackets? (a) < > (b) { } (c) [ ] (d) ( )
35. 35.What does justify-content: flex-start do? (a) packs boxes at the start (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the end
36. 36.⚖️ What colour is the text of this element?
    <h1 class="box" id="main">Hi</h1>
    CSS:
    h1 { color: black; }
    #main { color: green; }
    .box { color: red; } (a) red (b) purple (c) green (d) black
37. 37.✍️ Which property is set to center in this rule?
    h1 {
      text-align: center;
      padding: 8px;
    } (a) center (b) margin (c) background-color (d) text-align
38. 38.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    }
39. 39.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 150px;
      padding: 10px;
      border: 4px solid black;
      margin: 10px;
    }
40. 40.🌈 Which hex code is white? (a) #00ff00 (b) #ffffff (c) #00ffff (d) #ff0000

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