CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 795 · 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 is the selector in this CSS rule?
   h2 {
     color: red;
     text-align: center;
   } (a) center (b) color (c) h1 (d) h2
2. 2.🎯 Which CSS selector matches this element?
   <li class="red" id="top">Hello</li> (a) .box (b) #intro (c) #top (d) .top
3. 3.🎯 What kind of selector is #logo? (a) an id selector (b) an element selector (c) a class selector
4. 4.🌈 In #0f0000 the red part is the hex number 0f. What is it as a normal number?
5. 5.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the hr tag (c) the viewport meta tag (d) the br tag
6. 6.🌈 Which colour is rgb(255, 255, 255)? (a) white (b) red (c) black (d) yellow
7. 7.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 18px;
     }
   }
8. 8.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the later one (c) the shorter one (d) neither
9. 9.🔍 Which is the odd one out? (a) makes a link (b) gives the page structure (c) makes headings and lists (d) adds space around boxes
10. 10.💪 Which justify-content value packs boxes at the start? (a) center (b) flex-start (c) flex-end (d) space-between
11. 11.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      font-style: italic;
      width: 300px;
    }
12. 12.✍️ Which sign goes between a property and its value? (a) - (b) = (c) : (d) ;
13. 13.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      width: 300px;
      font-style: italic;
    }
14. 14.🎯 Which CSS selector matches this element?
    <li class="big" id="top">Hello</li> (a) .top (b) #big (c) div (d) #top
15. 15.True or false: JavaScript counts down a timer. (a) True (b) False
16. 16.🌈 Which hex code is yellow? (a) #0000ff (b) #ffff00 (c) #ff0000 (d) #ffffff
17. 17.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 60px;
      padding: 20px;
      border: 1px solid black;
      margin: 0px;
    }
18. 18.Which of these does HTML do? (a) sets colours and fonts (b) counts down a timer (c) lays out the page (d) gives the page structure
19. 19.True or false: JavaScript changes the text size. (a) False (b) True
20. 20.✍️ In color: blue; which part is the property? (a) blue (b) ; (c) : (d) color
21. 21.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 210px;
      padding: 5px;
      border: 3px solid black;
      margin: 10px;
    }
22. 22.🎯 Which sign starts a class selector? (a) . (b) @ (c) # (d) &
23. 23.🖌️ Which CSS property makes letters bigger? (a) color (b) background-color (c) font-size (d) font-weight
24. 24.🎨 One CSS file can style how many pages? (a) many pages (b) only one word (c) no pages (d) only one image
25. 25.🖌️ What colour are the letters?
    h1 {
      text-align: center;
      background-color: red;
      font-size: 28px;
      color: purple;
    } (a) red (b) purple (c) black
26. 26.🎯 Which element does the selector p style? (a) <h1> (b) <h2 class="red"> (c) <li id="logo"> (d) <p class="red">
27. 27.🎯 Which sign starts an id selector? (a) @ (b) # (c) . (d) &
28. 28.What does justify-content: flex-end do? (a) packs boxes at the start (b) equal gaps, none at ends (c) packs boxes at the end (d) puts boxes in the middle
29. 29.✍️ What value is given to font-weight in this rule?
    #top {
      color: red;
      font-weight: bold;
    } (a) font-weight (b) 300px (c) bold (d) 2px solid
30. 30.📦 In the box model, which part is the text or picture? (a) content (b) margin (c) border (d) padding
31. 31.🌈 Which colour is #ffffff? (a) bright green (b) white (c) red (d) yellow
32. 32.Which of these is the content? (a) space inside the border (b) the gap to other boxes (c) the text or picture (d) a solid or dotted edge
33. 33.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      margin: 10px;
      background-color: yellow;
      font-size: 20px;
      font-style: italic;
    }
34. 34.⚖️ What colour is the text of this element?
    <p class="note" id="end">Hi</p>
    CSS:
    p { color: white; }
    #end { color: green; } (a) orange (b) white (c) green (d) blue
35. 35.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 130px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 60px wide (no margins).
36. 36.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 32px;
      }
    }
37. 37.✍️ What is the selector in this CSS rule?
    .note {
      font-style: italic;
      width: 300px;
      color: red;
    } (a) .note (b) 300px (c) #top (d) font-style
38. 38.🌈 Hex digits go 0 to 9, then A to which letter? (a) F (b) G (c) J (d) Z
39. 39.✍️ What value is given to color in this rule?
    #top {
      font-size: 20px;
      color: red;
    } (a) color (b) 20px (c) center (d) red
40. 40.✍️ What is the selector in this CSS rule?
    .box {
      text-align: center;
      color: red;
    } (a) red (b) h2 (c) text-align (d) .box

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