CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 935 · 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.🖌️ How big is the text, in px?
   li {
     background-color: orange;
     text-align: left;
     color: purple;
     font-size: 40px;
   }
2. 2.🌈 Which colour is rgb(0, 255, 0)? (a) blue (b) red (c) bright green (d) white
3. 3.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 22px;
     }
   }
4. 4.⚖️ What colour is the text of this element?
   <h2 class="box" id="end">Hi</h2>
   CSS:
   h2 { color: purple; }
   #end { color: orange; }
   .box { color: yellow; } (a) yellow (b) orange (c) purple (d) green
5. 5.🖌️ Which CSS property sets the letter colour? (a) text-align (b) color (c) font-size (d) font-weight
6. 6.✍️ How many declarations (property: value pairs) are in this rule?
   p {
     font-size: 20px;
   }
7. 7.🖌️ Where does the text sit on its line?
   li {
     font-size: 36px;
     text-align: right;
     color: purple;
     background-color: red;
   } (a) in the middle (b) on the right (c) on the left
8. 8.🌈 Which colour is #ffffff? (a) yellow (b) bright green (c) white (d) magenta
9. 9.🎯 Which element does the selector h1 style? (a) <li class="menu"> (b) <h2> (c) <div id="logo"> (d) <h1 class="menu">
10. 10.🎯 What kind of selector is #logo? (a) an id selector (b) a class selector (c) an element selector
11. 11.🧩 Which language adds space around boxes? (a) HTML (b) CSS (c) JavaScript
12. 12.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 24px;
      }
    } (a) Yes (b) No
13. 13.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) the first one (c) neither (d) the shorter one
14. 14.✍️ What is the selector in this CSS rule?
    h1 {
      color: red;
      font-size: 20px;
      margin: 10px;
    } (a) p (b) 20px (c) h1 (d) color
15. 15.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 28px;
      }
    } (a) Yes (b) No
16. 16.💪 Which flexbox property turns on flexbox? (a) flex-direction (b) justify-content (c) display: flex (d) align-items
17. 17.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the br tag (c) the hr tag (d) the viewport meta tag
18. 18.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 90px;
      padding: 25px;
      border: 4px solid black;
      margin: 20px;
    }
19. 19.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 28px;
      }
    }
20. 20.Which of these does JavaScript do? (a) lays out the page (b) makes a form box (c) changes the page live (d) gives the page structure
21. 21.⚖️ What colour is the text of this element?
    <h2 class="box" id="hero">Hi</h2>
    CSS:
    h2 { color: purple; }
    .box { color: blue; }
    #hero { color: white; } (a) blue (b) white (c) purple (d) green
22. 22.🌈 In #000086 the blue part is the hex number 86. What is it as a normal number?
23. 23.True or false: JavaScript adds space around boxes. (a) False (b) True
24. 24.✍️ Which property is set to center in this rule?
    .box {
      margin: 10px;
      background-color: yellow;
      text-align: center;
    } (a) text-align (b) center (c) background-color (d) margin
25. 25.✍️ Which property is set to italic in this rule?
    h2 {
      font-style: italic;
      color: red;
      font-weight: bold;
    } (a) font-size (b) color (c) font-style (d) italic
26. 26.🧩 Which language gives the page structure? (a) CSS (b) HTML (c) JavaScript
27. 27.⚖️ What colour is the text of this element?
    <h2 class="red" id="logo">Hi</h2>
    CSS:
    h2 { color: purple; }
    h2 { color: blue; } (a) red (b) purple (c) white (d) blue
28. 28.🖌️ What colour are the letters?
    li {
      font-size: 16px;
      color: red;
      background-color: blue;
      text-align: right;
    } (a) green (b) red (c) blue
29. 29.True or false: JavaScript makes headings and lists. (a) True (b) False
30. 30.True or false: HTML makes a form box. (a) True (b) False
31. 31.What does color do? (a) makes the text bold (b) colours behind the text (c) sets the letter colour (d) makes letters bigger
32. 32.✍️ Which property is set to bold in this rule?
    p {
      background-color: yellow;
      font-style: italic;
      font-weight: bold;
    } (a) width (b) border (c) bold (d) font-weight
33. 33.🌈 Which colour is #00ff00? (a) red (b) bright green (c) blue (d) white
34. 34.🌈 In #001b00 the green part is the hex number 1b. What is it as a normal number?
35. 35.⚖️ What colour is the text of this element?
    <p class="red" id="intro">Hi</p>
    CSS:
    p { color: black; }
    p { color: blue; } (a) red (b) black (c) purple (d) blue
36. 36.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 20px;
      }
    } (a) No (b) Yes
37. 37.🎯 What kind of selector is li? (a) an element selector (b) a class selector (c) an id selector
38. 38.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 32px;
      }
    }
39. 39.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 190px;
      padding: 25px;
      border: 5px solid black;
      margin: 0px;
    }
40. 40.🎯 Which CSS selector matches this element?
    <p class="box" id="logo">Hello</p> (a) #box (b) .star (c) #logo (d) #end

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