CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 607 · 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 CSS property colours behind the text? (a) font-weight (b) background-color (c) font-size (d) color
2. 2.✍️ What value is given to background-color in this rule?
   h2 {
     font-size: 20px;
     background-color: yellow;
     font-style: italic;
     font-weight: bold;
   } (a) background-color (b) 8px (c) 10px (d) yellow
3. 3.💪 Which flexbox property spaces boxes along a row? (a) display: flex (b) align-items (c) gap (d) justify-content
4. 4.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 440px;
     justify-content: space-between;
   }
   Inside are 3 boxes, each 100px wide (no margins).
5. 5.💪 Which flexbox property sets space between boxes? (a) justify-content (b) align-items (c) display: flex (d) gap
6. 6.⚖️ What colour is the text of this element?
   <h2 class="red" id="intro">Hi</h2>
   CSS:
   h2 { color: orange; }
   h2 { color: white; } (a) orange (b) black (c) white (d) blue
7. 7.🖌️ What colour is behind the letters?
   h1 {
     text-align: center;
     background-color: yellow;
     font-size: 28px;
     color: blue;
   } (a) yellow (b) purple (c) blue
8. 8.⚖️ What colour is the text of this element?
   <p class="red" id="end">Hi</p>
   CSS:
   .red { color: orange; }
   #end { color: blue; } (a) red (b) blue (c) orange (d) black
9. 9.What does font-family do? (a) picks the font style (b) makes the text bold (c) colours behind the text (d) makes letters bigger
10. 10.🖌️ Where does the text sit on its line?
    p {
      text-align: right;
      background-color: blue;
      font-size: 40px;
      color: yellow;
    } (a) in the middle (b) on the left (c) on the right
11. 11.🎯 Which CSS selector matches this element?
    <h1 class="star" id="logo">Hello</h1> (a) .logo (b) #star (c) h2 (d) h1
12. 12.🖌️ Which CSS property picks the font style? (a) color (b) text-align (c) font-family (d) background-color
13. 13.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 440px;
      justify-content: center;
    }
    Inside are 4 boxes, each 100px wide (no margins).
14. 14.✍️ CSS declarations go inside which brackets? (a) [ ] (b) { } (c) < > (d) ( )
15. 15.📦 In the box model, which part is the gap to other boxes? (a) content (b) border (c) padding (d) margin
16. 16.🌈 In #003400 the green part is the hex number 34. What is it as a normal number?
17. 17.✍️ What value is given to width in this rule?
    .box {
      width: 300px;
      background-color: yellow;
      padding: 8px;
    } (a) width (b) red (c) 300px (d) italic
18. 18.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 420px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 100px wide (no margins).
19. 19.True or false: the border is the line round the box. (a) True (b) False
20. 20.🎯 Which element does the selector #intro style? (a) <h2 id="main"> (b) <h2 id="intro"> (c) <li class="big"> (d) <h2 class="intro">
21. 21.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      color: red;
      font-weight: bold;
      width: 300px;
    }
22. 22.🌈 Which hex code is black? (a) #ffff00 (b) #00ff00 (c) #000000 (d) #ffffff
23. 23.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
24. 24.✍️ Which sign goes between a property and its value? (a) : (b) ; (c) - (d) =
25. 25.🔍 Which is the odd one out? (a) shows a pop-up message (b) reacts to a button click (c) puts a picture on a page (d) checks a quiz answer
26. 26.🎯 Which element does the selector div style? (a) <span> (b) <div class="note"> (c) <h1 id="end"> (d) <p class="note">
27. 27.✍️ What value is given to font-style in this rule?
    #top {
      font-style: italic;
      width: 300px;
    } (a) 20px (b) red (c) italic (d) font-style
28. 28.🎨 One CSS file can style how many pages? (a) only one word (b) no pages (c) only one image (d) many pages
29. 29.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 180px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 40px wide (no margins).
30. 30.Which of these is margin? (a) the text or picture (b) the line round the box (c) the gap round content (d) the gap to other boxes
31. 31.Which of these does JavaScript do? (a) makes a link (b) adds space around boxes (c) changes the page live (d) gives the page structure
32. 32.🎯 How many elements on a page should have the same id? (a) 2 (b) 5 (c) 1 (d) any number
33. 33.💪 Which flexbox property turns on flexbox? (a) flex-direction (b) justify-content (c) gap (d) display: flex
34. 34.💪 Which justify-content value packs boxes at the start? (a) flex-start (b) center (c) flex-end (d) space-between
35. 35.True or false: margin is the gap round content. (a) True (b) False
36. 36.🖌️ What colour is behind the letters?
    h1 {
      font-size: 36px;
      text-align: right;
      background-color: orange;
      color: yellow;
    } (a) black (b) yellow (c) orange
37. 37.🖌️ Where does the text sit on its line?
    h1 {
      font-size: 40px;
      color: orange;
      background-color: blue;
      text-align: left;
    } (a) on the right (b) on the left (c) in the middle
38. 38.🎯 Which sign starts a class selector? (a) @ (b) & (c) # (d) .
39. 39.✍️ In color: blue; which part is the value? (a) : (b) blue (c) color (d) ;
40. 40.What does font-weight do? (a) picks the font style (b) sets the letter colour (c) centres a heading (d) makes the text bold

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