CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 568 · 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.🖌️ Where does the text sit on its line?
   li {
     background-color: purple;
     text-align: left;
     font-size: 24px;
     color: yellow;
   } (a) on the left (b) on the right (c) in the middle
2. 2.✍️ Which sign ends each CSS declaration? (a) : (b) ; (c) , (d) .
3. 3.What does font-weight do? (a) sets the letter colour (b) makes letters bigger (c) makes the text bold (d) colours behind the text
4. 4.📱 Responsive design means a page ___. (a) is only for laptops (b) has no pictures (c) fits every screen (d) never changes
5. 5.🎯 Which sign starts a class selector? (a) @ (b) & (c) # (d) .
6. 6.🖌️ Which CSS property sets the letter colour? (a) background-color (b) text-align (c) color (d) font-weight
7. 7.🎯 Which element does the selector #intro style? (a) <h1 id="intro"> (b) <h2 class="note"> (c) <h1 class="intro"> (d) <h1 id="main">
8. 8.🎯 Which CSS selector matches this element?
   <li class="star" id="top">Hello</li> (a) #intro (b) .menu (c) .top (d) #top
9. 9.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the later one (c) the first one (d) neither
10. 10.📦 In the box model, which part is a solid or dotted edge? (a) content (b) padding (c) border (d) margin
11. 11.✍️ CSS declarations go inside which brackets? (a) [ ] (b) < > (c) { } (d) ( )
12. 12.🎯 Which CSS selector matches this element?
    <li class="star" id="end">Hello</li> (a) li (b) #star (c) #hero (d) .menu
13. 13.⚖️ What colour is the text of this element?
    <p class="big" id="top">Hi</p>
    CSS:
    .big { color: purple; }
    #top { color: blue; }
    p { color: black; } (a) white (b) blue (c) purple (d) black
14. 14.True or false: #end is a class selector. (a) False (b) True
15. 15.🎯 What kind of selector is .menu? (a) an element selector (b) an id selector (c) a class selector
16. 16.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 460px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 100px wide (no margins).
17. 17.What does justify-content: center do? (a) packs boxes at the end (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the start
18. 18.🖌️ Where does the text sit on its line?
    h2 {
      font-size: 28px;
      color: orange;
      background-color: white;
      text-align: left;
    } (a) on the left (b) on the right (c) in the middle
19. 19.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 2 (b) 6 (c) 4 (d) 3
20. 20.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
21. 21.🎯 Which element does the selector .big style? (a) <h2 id="big"> (b) <li class="box"> (c) <h2 class="big"> (d) <h2 class="red">
22. 22.🌈 Which colour of light is strongest in rgb(4, 169, 23)? (a) green (b) blue (c) red
23. 23.Which of these does HTML do? (a) sets colours and fonts (b) changes the page live (c) makes headings and lists (d) lays out the page
24. 24.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      width: 300px;
      font-size: 20px;
    }
25. 25.🌈 In #280000 the red part is the hex number 28. What is it as a normal number?
26. 26.⚖️ What colour is the text of this element?
    <h1 class="menu" id="main">Hi</h1>
    CSS:
    #main { color: orange; }
    #main { color: red; } (a) yellow (b) green (c) orange (d) red
27. 27.✍️ What value is given to color in this rule?
    .note {
      color: red;
      font-style: italic;
      padding: 8px;
    } (a) red (b) color (c) center (d) 20px
28. 28.🖌️ Which CSS property makes the text bold? (a) color (b) font-size (c) font-family (d) font-weight
29. 29.🎨 Which attribute adds CSS inside one tag? (a) src (b) href (c) style (d) alt
30. 30.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 90px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 40px wide (no margins).
31. 31.⚖️ What colour is the text of this element?
    <h2 class="big" id="logo">Hi</h2>
    CSS:
    h2 { color: red; }
    .big { color: orange; }
    #logo { color: white; } (a) yellow (b) red (c) white (d) orange
32. 32.🖌️ What colour is behind the letters?
    li {
      background-color: black;
      text-align: right;
      font-size: 12px;
      color: white;
    } (a) white (b) black (c) red
33. 33.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 120px;
      padding: 5px;
      border: 4px solid black;
      margin: 20px;
    }
34. 34.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 8px;
      }
    }
35. 35.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 300px;
      padding: 30px;
      border: 2px solid black;
      margin: 20px;
    }
36. 36.🌈 In #00af00 the green part is the hex number af. What is it as a normal number?
37. 37.🖌️ How big is the text, in px?
    h1 {
      background-color: purple;
      text-align: left;
      font-size: 16px;
      color: yellow;
    }
38. 38.🌈 Which colour of light is strongest in rgb(8, 220, 90)? (a) blue (b) red (c) green
39. 39.What does justify-content: space-between do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the start (d) packs boxes at the end
40. 40.✍️ In color: blue; which part is the value? (a) blue (b) ; (c) color (d) :

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