CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 846 · 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.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) 800px or narrower (c) turned off (d) exactly 100px
2. 2.🎯 How many elements on a page should have the same id? (a) 2 (b) 1 (c) 5 (d) any number
3. 3.🎯 Which CSS selector matches this element?
   <li class="star" id="main">Hello</li> (a) .main (b) #star (c) #logo (d) .star
4. 4.True or false: HTML reacts to a button click. (a) True (b) False
5. 5.💪 Which flexbox property lines boxes up across? (a) display: flex (b) align-items (c) gap (d) flex-direction
6. 6.📱 max-width: 600px applies when the screen is ___. (a) turned off (b) 600px or narrower (c) 600px or wider (d) exactly 1000px
7. 7.⚖️ Which selector is the weakest? (a) a class selector (b) an element selector (c) an id selector
8. 8.📦 In the box model, which part is space outside the border? (a) content (b) border (c) padding (d) margin
9. 9.🌈 Which colour is rgb(0, 0, 255)? (a) red (b) bright green (c) cyan (d) blue
10. 10.🖌️ How big is the text, in px?
    h1 {
      text-align: center;
      background-color: orange;
      font-size: 12px;
      color: white;
    }
11. 11.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 110px;
      padding: 25px;
      border: 5px solid black;
      margin: 10px;
    }
12. 12.🌈 Which colour of light is strongest in rgb(76, 229, 54)? (a) green (b) blue (c) red
13. 13.🖌️ Where does the text sit on its line?
    h1 {
      text-align: left;
      font-size: 20px;
      background-color: orange;
      color: white;
    } (a) on the left (b) on the right (c) in the middle
14. 14.🔍 Which is the odd one out? (a) adds space around boxes (b) rounds box corners (c) counts down a timer (d) changes the text size
15. 15.✍️ Which property is set to bold in this rule?
    #top {
      font-weight: bold;
      color: red;
      font-style: italic;
    } (a) width (b) font-weight (c) border (d) bold
16. 16.🎨 Which attribute adds CSS inside one tag? (a) src (b) alt (c) href (d) style
17. 17.🌈 Which colour of light is strongest in rgb(57, 199, 31)? (a) blue (b) green (c) red
18. 18.What does justify-content: flex-end do? (a) packs boxes at the start (b) puts boxes in the middle (c) equal gaps, none at ends (d) packs boxes at the end
19. 19.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 220px;
      padding: 30px;
      border: 1px solid black;
      margin: 10px;
    }
20. 20.💪 Which justify-content value puts boxes in the middle? (a) space-between (b) center (c) flex-end (d) flex-start
21. 21.📱 What does a media query check? (a) the battery level (b) the time of day (c) the screen width (d) the page title
22. 22.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    } (a) Yes (b) No
23. 23.💪 Which justify-content value packs boxes at the end? (a) flex-start (b) flex-end (c) space-between (d) center
24. 24.Which of these is margin? (a) a solid or dotted edge (b) space inside the border (c) the gap to other boxes (d) the line round the box
25. 25.Which of these does JavaScript do? (a) gives the page structure (b) counts down a timer (c) rounds box corners (d) changes the text size
26. 26.✍️ Which property is set to yellow in this rule?
    #top {
      background-color: yellow;
      width: 300px;
      text-align: center;
    } (a) padding (b) yellow (c) background-color (d) margin
27. 27.🎯 Which CSS selector matches this element?
    <h1 class="star" id="logo">Hello</h1> (a) .menu (b) #star (c) #end (d) h1
28. 28.🖌️ Where does the text sit on its line?
    h1 {
      color: orange;
      text-align: center;
      font-size: 16px;
      background-color: red;
    } (a) on the right (b) on the left (c) in the middle
29. 29.🖌️ Where does the text sit on its line?
    p {
      text-align: left;
      background-color: red;
      color: orange;
      font-size: 40px;
    } (a) in the middle (b) on the right (c) on the left
30. 30.🖌️ Where does the text sit on its line?
    h1 {
      text-align: left;
      color: green;
      font-size: 32px;
      background-color: purple;
    } (a) in the middle (b) on the left (c) on the right
31. 31.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 260px;
      padding: 15px;
      border: 2px solid black;
      margin: 0px;
    }
32. 32.⚖️ What colour is the text of this element?
    <h1 class="menu" id="logo">Hi</h1>
    CSS:
    h1 { color: red; }
    #logo { color: green; }
    .menu { color: white; } (a) red (b) blue (c) green (d) white
33. 33.🌈 Which hex code is bright green? (a) #ffff00 (b) #00ff00 (c) #0000ff (d) #ffffff
34. 34.🧩 Which language makes a form box? (a) JavaScript (b) CSS (c) HTML
35. 35.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 310px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 80px wide (no margins).
36. 36.⚖️ What colour is the text of this element?
    <h2 class="big" id="top">Hi</h2>
    CSS:
    #top { color: red; }
    h2 { color: blue; } (a) yellow (b) red (c) blue (d) white
37. 37.🎯 What kind of selector is .note? (a) a class selector (b) an element selector (c) an id selector
38. 38.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 20px;
      }
    }
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: 70px;
      padding: 20px;
      border: 4px solid black;
      margin: 10px;
    }
40. 40.⚖️ What colour is the text of this element?
    <h2 class="menu" id="intro">Hi</h2>
    CSS:
    h2 { color: purple; }
    .menu { color: green; }
    #intro { color: red; } (a) green (b) yellow (c) purple (d) red

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