CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 335 · 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 much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 370px;
     justify-content: flex-start;
   }
   Inside are 4 boxes, each 80px wide (no margins).
2. 2.🔍 Which is the odd one out? (a) gives the page structure (b) reacts to a button click (c) puts a picture on a page (d) makes a link
3. 3.⚖️ What colour is the text of this element?
   <h1 class="menu" id="top">Hi</h1>
   CSS:
   h1 { color: orange; }
   h1 { color: purple; } (a) orange (b) blue (c) yellow (d) purple
4. 4.True or false: #logo is an id selector. (a) True (b) False
5. 5.🎯 What kind of selector is #main? (a) an element selector (b) an id selector (c) a class selector
6. 6.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) exactly 1000px (c) turned off (d) 600px or narrower
7. 7.🖌️ What colour is behind the letters?
   p {
     text-align: left;
     font-size: 16px;
     background-color: purple;
     color: blue;
   } (a) blue (b) orange (c) purple
8. 8.📱 The screen is 1100px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 6px;
     }
   } (a) No (b) Yes
9. 9.✍️ What is the selector in this CSS rule?
   li {
     background-color: yellow;
     font-size: 20px;
     border: 2px solid;
     margin: 10px;
   } (a) li (b) 20px (c) body (d) background-color
10. 10.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      font-size: 20px;
      font-weight: bold;
      padding: 8px;
      text-align: center;
    }
11. 11.🌈 Which colour of light is strongest in rgb(99, 188, 82)? (a) green (b) red (c) blue
12. 12.Which of these is padding? (a) the text or picture (b) the line round the box (c) the gap round content (d) the gap to other boxes
13. 13.🖌️ What colour are the letters?
    li {
      text-align: left;
      color: green;
      background-color: blue;
      font-size: 28px;
    } (a) green (b) blue (c) orange
14. 14.True or false: .big is a class selector. (a) True (b) False
15. 15.True or false: JavaScript counts down a timer. (a) True (b) False
16. 16.🎯 Which CSS selector matches this element?
    <li class="big" id="main">Hello</li> (a) div (b) #big (c) .big (d) #logo
17. 17.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      border: 2px solid;
      margin: 10px;
    }
18. 18.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the br tag (c) the viewport meta tag (d) the hr tag
19. 19.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the shorter one (c) the first one (d) the later one
20. 20.Which of these does CSS do? (a) reacts to a button click (b) puts a picture on a page (c) counts down a timer (d) changes the text size
21. 21.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 8px;
      }
    }
22. 22.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 22px;
      }
    } (a) No (b) Yes
23. 23.🎯 Which CSS selector matches this element?
    <h2 class="note" id="logo">Hello</h2> (a) li (b) #logo (c) .big (d) .logo
24. 24.✍️ What is the selector in this CSS rule?
    h2 {
      background-color: yellow;
      border: 2px solid;
    } (a) background-color (b) h1 (c) h2 (d) 2px solid
25. 25.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      padding: 8px;
      font-weight: bold;
      font-style: italic;
    }
26. 26.⚖️ What colour is the text of this element?
    <h2 class="big" id="top">Hi</h2>
    CSS:
    h2 { color: yellow; }
    h2 { color: black; } (a) yellow (b) green (c) white (d) black
27. 27.What does font-weight do? (a) sets the letter colour (b) makes the text bold (c) makes letters bigger (d) picks the font style
28. 28.⚖️ What colour is the text of this element?
    <p class="box" id="intro">Hi</p>
    CSS:
    p { color: red; }
    #intro { color: green; } (a) blue (b) purple (c) green (d) red
29. 29.🌈 Which colour is #ffffff? (a) bright green (b) blue (c) white (d) yellow
30. 30.✍️ How does a CSS comment start? (a) /* (b) <!-- (c) // (d) #
31. 31.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 90px;
      padding: 30px;
      border: 5px solid black;
      margin: 10px;
    }
32. 32.🎨 Which tag connects an outside CSS file? (a) <link> (b) <css> (c) <a> (d) <img>
33. 33.🔍 Which is the odd one out? (a) checks a quiz answer (b) reacts to a button click (c) counts down a timer (d) gives the page structure
34. 34.🌈 In #00001f the blue part is the hex number 1f. What is it as a normal number?
35. 35.✍️ What is the selector in this CSS rule?
    body {
      padding: 8px;
      font-weight: bold;
      text-align: center;
    } (a) bold (b) body (c) padding (d) .box
36. 36.🌈 In #bf0000 the red part is the hex number bf. What is it as a normal number?
37. 37.✍️ What is the selector in this CSS rule?
    .box {
      width: 300px;
      text-align: center;
    } (a) width (b) h2 (c) .box (d) center
38. 38.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 420px;
      justify-content: center;
    }
    Inside are 3 boxes, each 100px wide (no margins).
39. 39.🌈 Which colour is rgb(0, 0, 0)? (a) blue (b) magenta (c) red (d) black
40. 40.📦 In the box model, which part is the text or picture? (a) border (b) padding (c) margin (d) content

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