CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 472 · 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: HTML lays out the page. (a) False (b) True
2. 2.📱 The screen is 320px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 6px;
     }
   } (a) Yes (b) No
3. 3.🖌️ How big is the text, in px?
   p {
     background-color: purple;
     color: blue;
     text-align: right;
     font-size: 36px;
   }
4. 4.⚖️ What colour is the text of this element?
   <p class="big" id="main">Hi</p>
   CSS:
   p { color: orange; }
   p { color: red; } (a) black (b) purple (c) orange (d) red
5. 5.🎨 Which tag connects an outside CSS file? (a) <a> (b) <link> (c) <css> (d) <img>
6. 6.⚖️ What colour is the text of this element?
   <p class="star" id="hero">Hi</p>
   CSS:
   #hero { color: blue; }
   .star { color: green; }
   p { color: yellow; } (a) yellow (b) blue (c) white (d) green
7. 7.True or false: .big is an element selector. (a) True (b) False
8. 8.🖌️ What colour is behind the letters?
   p {
     font-size: 16px;
     text-align: left;
     color: red;
     background-color: white;
   } (a) white (b) black (c) red
9. 9.✍️ Which sign ends each CSS declaration? (a) ; (b) , (c) . (d) :
10. 10.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 50px;
      padding: 25px;
      border: 2px solid black;
      margin: 20px;
    }
11. 11.📱 What does a media query check? (a) the page title (b) the time of day (c) the screen width (d) the battery level
12. 12.Which of these is margin? (a) the gap round content (b) a solid or dotted edge (c) the text or picture (d) space outside the border
13. 13.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 8px;
      }
    }
14. 14.What does font-family do? (a) centres a heading (b) picks the font style (c) colours behind the text (d) sets the letter colour
15. 15.What does justify-content: flex-end do? (a) puts boxes in the middle (b) equal gaps, none at ends (c) packs boxes at the start (d) packs boxes at the end
16. 16.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 6px;
      }
    }
17. 17.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
18. 18.⚖️ What colour is the text of this element?
    <h1 class="note" id="main">Hi</h1>
    CSS:
    #main { color: blue; }
    .note { color: green; }
    h1 { color: purple; } (a) black (b) green (c) blue (d) purple
19. 19.🎯 Which element does the selector h1 style? (a) <h2> (b) <li class="big"> (c) <h1 class="big"> (d) <div id="intro">
20. 20.True or false: the border is the line round the box. (a) False (b) True
21. 21.🌈 In #3b0000 the red part is the hex number 3b. What is it as a normal number?
22. 22.💪 Which flexbox property sets space between boxes? (a) display: flex (b) gap (c) align-items (d) justify-content
23. 23.⚖️ What colour is the text of this element?
    <h1 class="big" id="top">Hi</h1>
    CSS:
    #top { color: black; }
    h1 { color: green; } (a) white (b) black (c) green (d) red
24. 24.🖌️ How big is the text, in px?
    h1 {
      font-size: 24px;
      color: purple;
      text-align: center;
      background-color: red;
    }
25. 25.🌈 Hex digits go 0 to 9, then A to which letter? (a) G (b) F (c) J (d) Z
26. 26.Which of these does CSS do? (a) gives the page structure (b) changes the text size (c) puts a picture on a page (d) reacts to a button click
27. 27.🎯 What kind of selector is h1? (a) an element selector (b) a class selector (c) an id selector
28. 28.🎯 Which element does the selector h2 style? (a) <h2 class="red"> (b) <span id="hero"> (c) <li> (d) <div class="red">
29. 29.⚖️ What colour is the text of this element?
    <h1 class="note" id="intro">Hi</h1>
    CSS:
    h1 { color: orange; }
    h1 { color: green; } (a) green (b) white (c) red (d) orange
30. 30.✍️ Which property is set to yellow in this rule?
    body {
      width: 300px;
      background-color: yellow;
      border: 2px solid;
      text-align: center;
    } (a) yellow (b) margin (c) background-color (d) padding
31. 31.⚖️ What colour is the text of this element?
    <p class="red" id="logo">Hi</p>
    CSS:
    .red { color: red; }
    .red { color: white; } (a) red (b) blue (c) white (d) black
32. 32.💪 Which flexbox property turns on flexbox? (a) justify-content (b) gap (c) display: flex (d) flex-direction
33. 33.🖌️ Which CSS property makes the text bold? (a) color (b) font-weight (c) font-size (d) font-family
34. 34.📱 Responsive design means a page ___. (a) is only for laptops (b) has no pictures (c) fits every screen (d) never changes
35. 35.What does text-align do? (a) picks the font style (b) sets the letter colour (c) centres a heading (d) makes letters bigger
36. 36.🖌️ Where does the text sit on its line?
    li {
      text-align: right;
      color: purple;
      font-size: 16px;
      background-color: yellow;
    } (a) on the left (b) on the right (c) in the middle
37. 37.✍️ Which property is set to 2px solid in this rule?
    .box {
      border: 2px solid;
      color: red;
    } (a) 2px solid (b) width (c) border (d) font-style
38. 38.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    }
39. 39.True or false: margin is space outside the border. (a) False (b) True
40. 40.💪 Which justify-content value puts boxes in the middle? (a) space-between (b) flex-start (c) center (d) flex-end

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