CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 293 · 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.What does background-color do? (a) sets the letter colour (b) makes letters bigger (c) makes the text bold (d) colours behind the text
2. 2.True or false: CSS puts a picture on a page. (a) True (b) False
3. 3.🎯 What kind of selector is #end? (a) an id selector (b) an element selector (c) a class selector
4. 4.💪 Which justify-content value packs boxes at the end? (a) space-between (b) flex-end (c) center (d) flex-start
5. 5.💪 Which justify-content value packs boxes at the start? (a) flex-start (b) center (c) flex-end (d) space-between
6. 6.True or false: JavaScript rounds box corners. (a) False (b) True
7. 7.✍️ Which sign ends each CSS declaration? (a) , (b) . (c) : (d) ;
8. 8.True or false: .card is a class selector. (a) True (b) False
9. 9.What does font-family do? (a) makes letters bigger (b) picks the font style (c) sets the letter colour (d) makes the text bold
10. 10.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the viewport meta tag (c) the hr tag (d) the br tag
11. 11.Which of these is padding? (a) space inside the border (b) a solid or dotted edge (c) the line round the box (d) the text or picture
12. 12.📱 What does a media query check? (a) the page title (b) the battery level (c) the screen width (d) the time of day
13. 13.🎨 What does CSS stand for? (a) Colourful Site Styles (b) Creative Sheet System (c) Computer Style Sheets (d) Cascading Style Sheets
14. 14.🌈 Which colour of light is strongest in rgb(22, 42, 198)? (a) green (b) red (c) blue
15. 15.🖌️ How big is the text, in px?
    li {
      background-color: blue;
      text-align: center;
      color: green;
      font-size: 20px;
    }
16. 16.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 190px;
      padding: 15px;
      border: 3px solid black;
      margin: 5px;
    }
17. 17.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) red (c) green (d) black
18. 18.True or false: .star is an id selector. (a) False (b) True
19. 19.🎯 Which CSS selector matches this element?
    <span class="star" id="hero">Hello</span> (a) .star (b) #top (c) .menu (d) #star
20. 20.🖌️ Where does the text sit on its line?
    h1 {
      color: purple;
      font-size: 24px;
      background-color: orange;
      text-align: center;
    } (a) on the right (b) on the left (c) in the middle
21. 21.💪 Which justify-content value equal gaps, none at ends? (a) center (b) flex-start (c) space-between (d) flex-end
22. 22.✍️ What value is given to color in this rule?
    h2 {
      color: red;
      font-weight: bold;
    } (a) center (b) red (c) 20px (d) color
23. 23.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 260px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 50px wide (no margins).
24. 24.True or false: padding is space inside the border. (a) False (b) True
25. 25.True or false: .note is an element selector. (a) True (b) False
26. 26.Which of these is the content? (a) a solid or dotted edge (b) space outside the border (c) the text or picture (d) the gap round content
27. 27.🖌️ Where does the text sit on its line?
    p {
      background-color: yellow;
      text-align: center;
      color: black;
      font-size: 24px;
    } (a) on the right (b) in the middle (c) on the left
28. 28.⚖️ What colour is the text of this element?
    <p class="red" id="main">Hi</p>
    CSS:
    #main { color: purple; }
    #main { color: red; } (a) blue (b) red (c) purple (d) orange
29. 29.🌈 Which colour of light is strongest in rgb(131, 93, 158)? (a) green (b) blue (c) red
30. 30.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      border: 2px solid;
      font-size: 20px;
      background-color: yellow;
      margin: 10px;
    }
31. 31.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
32. 32.✍️ What value is given to text-align in this rule?
    h2 {
      margin: 10px;
      text-align: center;
    } (a) text-align (b) yellow (c) 10px (d) center
33. 33.Which of these does JavaScript do? (a) checks a quiz answer (b) puts a picture on a page (c) lays out the page (d) rounds box corners
34. 34.✍️ In color: blue; which part is the property? (a) blue (b) ; (c) : (d) color
35. 35.✍️ What value is given to color in this rule?
    #top {
      border: 2px solid;
      text-align: center;
      color: red;
    } (a) red (b) center (c) 20px (d) color
36. 36.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      font-style: italic;
      color: red;
    }
37. 37.True or false: .big is a class selector. (a) False (b) True
38. 38.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 16px;
      }
    } (a) No (b) Yes
39. 39.🖌️ Which CSS property makes letters bigger? (a) font-size (b) background-color (c) font-family (d) font-weight
40. 40.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    }

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