CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 859 · 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 justify-content value packs boxes at the start? (a) center (b) flex-end (c) flex-start (d) space-between
2. 2.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 260px;
     justify-content: center;
   }
   Inside are 4 boxes, each 50px wide (no margins).
3. 3.🎯 Which element does the selector li style? (a) <span class="menu"> (b) <div> (c) <p id="main"> (d) <li class="menu">
4. 4.🖌️ How big is the text, in px?
   li {
     text-align: center;
     background-color: black;
     color: white;
     font-size: 24px;
   }
5. 5.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 350px;
     justify-content: flex-end;
   }
   Inside are 3 boxes, each 100px wide (no margins).
6. 6.⚖️ What colour is the text of this element?
   <h2 class="star" id="hero">Hi</h2>
   CSS:
   h2 { color: green; }
   #hero { color: blue; } (a) blue (b) green (c) orange (d) black
7. 7.📱 The screen is 375px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 10px;
     }
   } (a) No (b) Yes
8. 8.Which of these is margin? (a) the gap to other boxes (b) the line round the box (c) space inside the border (d) a solid or dotted edge
9. 9.📱 Responsive design means a page ___. (a) never changes (b) fits every screen (c) is only for laptops (d) has no pictures
10. 10.🎯 Which element does the selector h1 style? (a) <div id="end"> (b) <h2> (c) <li class="box"> (d) <h1 class="box">
11. 11.Which of these does CSS do? (a) reacts to a button click (b) makes a link (c) puts a picture on a page (d) rounds box corners
12. 12.True or false: margin is a solid or dotted edge. (a) False (b) True
13. 13.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 22px;
      }
    }
14. 14.⚖️ What colour is the text of this element?
    <h1 class="star" id="top">Hi</h1>
    CSS:
    #top { color: yellow; }
    #top { color: green; } (a) yellow (b) white (c) green (d) red
15. 15.🎨 What does CSS stand for? (a) Cascading Style Sheets (b) Computer Style Sheets (c) Colourful Site Styles (d) Creative Sheet System
16. 16.🖌️ What colour are the letters?
    p {
      text-align: center;
      font-size: 24px;
      background-color: green;
      color: yellow;
    } (a) green (b) yellow (c) blue
17. 17.🌈 Which colour of light is strongest in rgb(223, 115, 10)? (a) green (b) blue (c) red
18. 18.🖌️ Which CSS property makes letters bigger? (a) color (b) font-family (c) font-size (d) background-color
19. 19.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 280px;
      padding: 25px;
      border: 4px solid black;
      margin: 0px;
    }
20. 20.Which of these does HTML do? (a) makes a link (b) adds space around boxes (c) rounds box corners (d) lays out the page
21. 21.Which of these is padding? (a) space inside the border (b) the text or picture (c) the line round the box (d) the gap to other boxes
22. 22.What does font-size do? (a) sets the letter colour (b) makes the text bold (c) makes letters bigger (d) picks the font style
23. 23.True or false: margin is the gap to other boxes. (a) True (b) False
24. 24.🌈 Which colour is #ff0000? (a) yellow (b) red (c) bright green (d) white
25. 25.🌈 In #rrggbb, which colour do the last two digits give? (a) white (b) green (c) red (d) blue
26. 26.🖌️ What colour are the letters?
    h1 {
      text-align: left;
      background-color: purple;
      color: white;
      font-size: 36px;
    } (a) white (b) purple (c) black
27. 27.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 20px;
      }
    } (a) No (b) Yes
28. 28.✍️ Which property is set to 8px in this rule?
    .box {
      color: red;
      padding: 8px;
    } (a) padding (b) 8px (c) border (d) font-weight
29. 29.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 200px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 60px wide (no margins).
30. 30.🖌️ Where does the text sit on its line?
    li {
      color: white;
      text-align: right;
      background-color: blue;
      font-size: 12px;
    } (a) in the middle (b) on the left (c) on the right
31. 31.🌈 Which hex code is yellow? (a) #ff00ff (b) #00ff00 (c) #00ffff (d) #ffff00
32. 32.🔍 Which is the odd one out? (a) changes the text size (b) sets colours and fonts (c) lays out the page (d) puts a picture on a page
33. 33.📦 In the box model, which part is the text or picture? (a) border (b) padding (c) content (d) margin
34. 34.🎨 A CSS file usually ends with which extension? (a) .png (b) .css (c) .html (d) .js
35. 35.✍️ CSS declarations go inside which brackets? (a) ( ) (b) < > (c) { } (d) [ ]
36. 36.⚖️ What colour is the text of this element?
    <h2 class="note" id="top">Hi</h2>
    CSS:
    #top { color: red; }
    #top { color: green; } (a) orange (b) green (c) red (d) blue
37. 37.🧩 Which language changes the page live? (a) JavaScript (b) HTML (c) CSS
38. 38.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 330px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 100px wide (no margins).
39. 39.🌈 Which hex code is bright green? (a) #ffffff (b) #00ff00 (c) #000000 (d) #ff0000
40. 40.✍️ In color: blue; which part is the value? (a) blue (b) : (c) ; (d) color

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