CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 410 · 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 sign starts an id selector? (a) . (b) # (c) & (d) @
2. 2.📱 Which tag helps phones show a page at the right size? (a) the viewport meta tag (b) the title tag (c) the hr tag (d) the br tag
3. 3.⚖️ What colour is the text of this element?
   <h2 class="big" id="top">Hi</h2>
   CSS:
   .big { color: white; }
   .big { color: orange; } (a) orange (b) white (c) green (d) blue
4. 4.📱 The screen is 820px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 10px;
     }
   } (a) No (b) Yes
5. 5.✍️ In color: blue; which part is the property? (a) color (b) : (c) blue (d) ;
6. 6.🎯 Which element does the selector #logo style? (a) <div id="end"> (b) <span class="box"> (c) <div id="logo"> (d) <div class="logo">
7. 7.📱 The screen is 320px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 18px;
     }
   } (a) Yes (b) No
8. 8.What does font-family do? (a) colours behind the text (b) makes the text bold (c) sets the letter colour (d) picks the font style
9. 9.🌈 Which colour is rgb(255, 0, 0)? (a) bright green (b) magenta (c) cyan (d) red
10. 10.True or false: body is an element selector. (a) True (b) False
11. 11.📱 What does a media query check? (a) the battery level (b) the time of day (c) the page title (d) the screen width
12. 12.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 50px;
      padding: 30px;
      border: 1px solid black;
      margin: 0px;
    }
13. 13.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      background-color: yellow;
      font-weight: bold;
    }
14. 14.✍️ How does a CSS comment start? (a) # (b) // (c) <!-- (d) /*
15. 15.🎯 Which element does the selector li style? (a) <div> (b) <span class="note"> (c) <li class="note"> (d) <p id="top">
16. 16.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 340px;
      justify-content: center;
    }
    Inside are 3 boxes, each 80px wide (no margins).
17. 17.✍️ Which property is set to 300px in this rule?
    #top {
      width: 300px;
      font-weight: bold;
    } (a) width (b) font-style (c) color (d) 300px
18. 18.💪 Which flexbox property picks row or column? (a) gap (b) align-items (c) flex-direction (d) display: flex
19. 19.🖌️ Where does the text sit on its line?
    h2 {
      background-color: white;
      text-align: center;
      font-size: 28px;
      color: yellow;
    } (a) in the middle (b) on the right (c) on the left
20. 20.⚖️ What colour is the text of this element?
    <h2 class="menu" id="hero">Hi</h2>
    CSS:
    h2 { color: white; }
    .menu { color: red; }
    #hero { color: black; } (a) red (b) black (c) white (d) green
21. 21.True or false: margin is the gap to other boxes. (a) False (b) True
22. 22.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    }
23. 23.✍️ What value is given to font-style in this rule?
    body {
      margin: 10px;
      font-style: italic;
      background-color: yellow;
      border: 2px solid;
    } (a) 20px (b) font-style (c) italic (d) red
24. 24.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) neither (c) the shorter one (d) the later one
25. 25.🎯 Which sign starts a class selector? (a) # (b) . (c) @ (d) &
26. 26.Which of these does HTML do? (a) counts down a timer (b) lays out the page (c) changes the page live (d) makes a link
27. 27.🖌️ What colour are the letters?
    li {
      background-color: blue;
      font-size: 40px;
      text-align: left;
      color: yellow;
    } (a) blue (b) orange (c) yellow
28. 28.⚖️ What colour is the text of this element?
    <p class="note" id="hero">Hi</p>
    CSS:
    #hero { color: purple; }
    p { color: blue; } (a) blue (b) purple (c) white (d) green
29. 29.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) green (c) blue (d) white
30. 30.🌈 Which hex code is cyan? (a) #ffffff (b) #00ffff (c) #00ff00 (d) #000000
31. 31.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) black (c) blue (d) red
32. 32.🖌️ What colour are the letters?
    h2 {
      text-align: right;
      background-color: orange;
      font-size: 16px;
      color: purple;
    } (a) purple (b) orange (c) black
33. 33.⚖️ What colour is the text of this element?
    <p class="box" id="top">Hi</p>
    CSS:
    p { color: white; }
    .box { color: green; } (a) yellow (b) green (c) black (d) white
34. 34.✍️ What value is given to padding in this rule?
    #top {
      margin: 10px;
      padding: 8px;
      font-style: italic;
    } (a) 2px solid (b) bold (c) padding (d) 8px
35. 35.🎯 What kind of selector is .note? (a) an element selector (b) an id selector (c) a class selector
36. 36.✍️ Which sign goes between a property and its value? (a) - (b) : (c) = (d) ;
37. 37.True or false: the content is the gap round content. (a) False (b) True
38. 38.💪 Which justify-content value puts boxes in the middle? (a) flex-start (b) center (c) flex-end (d) space-between
39. 39.🖌️ What colour are the letters?
    h1 {
      font-size: 24px;
      background-color: blue;
      color: red;
      text-align: left;
    } (a) blue (b) black (c) red
40. 40.🎨 What does CSS stand for? (a) Computer Style Sheets (b) Creative Sheet System (c) Colourful Site Styles (d) Cascading Style Sheets

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