CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 280 · 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 of these is the content? (a) the text or picture (b) the line round the box (c) space inside the border (d) the gap to other boxes
2. 2.⚖️ What colour is the text of this element?
   <h1 class="menu" id="intro">Hi</h1>
   CSS:
   .menu { color: red; }
   .menu { color: white; } (a) black (b) purple (c) white (d) red
3. 3.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 26px;
     }
   }
4. 4.🔍 Which is the odd one out? (a) counts down a timer (b) checks a quiz answer (c) shows a pop-up message (d) makes a form box
5. 5.What does justify-content: center do? (a) equal gaps, none at ends (b) packs boxes at the start (c) packs boxes at the end (d) puts boxes in the middle
6. 6.🌈 Which hex code is bright green? (a) #ff0000 (b) #00ff00 (c) #ffffff (d) #ffff00
7. 7.✍️ What value is given to padding in this rule?
   #top {
     background-color: yellow;
     border: 2px solid;
     padding: 8px;
     font-weight: bold;
   } (a) 2px solid (b) 8px (c) bold (d) padding
8. 8.🌈 Which colour is rgb(0, 255, 255)? (a) cyan (b) magenta (c) yellow (d) red
9. 9.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the later one (c) the shorter one (d) the first one
10. 10.🖌️ Which CSS property picks the font style? (a) font-size (b) color (c) font-family (d) background-color
11. 11.💪 Which flexbox property spaces boxes along a row? (a) justify-content (b) display: flex (c) align-items (d) flex-direction
12. 12.💪 Which justify-content value packs boxes at the end? (a) center (b) space-between (c) flex-end (d) flex-start
13. 13.Which of these is padding? (a) the text or picture (b) space outside the border (c) the gap round content (d) a solid or dotted edge
14. 14.🌈 Which hex code is yellow? (a) #00ffff (b) #000000 (c) #ffff00 (d) #ff00ff
15. 15.📦 In the box model, which part is a solid or dotted edge? (a) content (b) margin (c) border (d) padding
16. 16.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 20px;
      }
    }
17. 17.🌈 Hex digits go 0 to 9, then A to which letter? (a) Z (b) G (c) J (d) F
18. 18.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) turned off (c) exactly 1000px (d) 600px or narrower
19. 19.🖌️ Which CSS property colours behind the text? (a) background-color (b) font-size (c) font-weight (d) text-align
20. 20.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the end (d) packs boxes at the start
21. 21.🖌️ What colour is behind the letters?
    p {
      background-color: yellow;
      font-size: 28px;
      text-align: left;
      color: green;
    } (a) purple (b) green (c) yellow
22. 22.🧩 Which language changes the page live? (a) JavaScript (b) CSS (c) HTML
23. 23.🧩 Which language gives the page structure? (a) HTML (b) CSS (c) JavaScript
24. 24.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 180px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 40px wide (no margins).
25. 25.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 240px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 40px wide (no margins).
26. 26.⚖️ What colour is the text of this element?
    <p class="star" id="end">Hi</p>
    CSS:
    #end { color: white; }
    #end { color: green; } (a) blue (b) green (c) yellow (d) white
27. 27.📱 What does a media query check? (a) the page title (b) the screen width (c) the battery level (d) the time of day
28. 28.✍️ In color: blue; which part is the property? (a) : (b) color (c) blue (d) ;
29. 29.Which of these does CSS do? (a) makes a link (b) makes headings and lists (c) gives the page structure (d) rounds box corners
30. 30.⚖️ What colour is the text of this element?
    <h2 class="note" id="end">Hi</h2>
    CSS:
    h2 { color: yellow; }
    h2 { color: orange; } (a) yellow (b) red (c) green (d) orange
31. 31.🖌️ Which CSS property sets the letter colour? (a) text-align (b) font-weight (c) background-color (d) color
32. 32.💪 Which justify-content value equal gaps, none at ends? (a) center (b) space-between (c) flex-end (d) flex-start
33. 33.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      color: red;
      text-align: center;
    }
34. 34.Which of these is padding? (a) the line round the box (b) a solid or dotted edge (c) space inside the border (d) space outside the border
35. 35.✍️ Which property is set to red in this rule?
    .box {
      color: red;
      padding: 8px;
    } (a) red (b) text-align (c) color (d) font-size
36. 36.True or false: #logo is an id selector. (a) False (b) True
37. 37.🧩 Which language checks a quiz answer? (a) CSS (b) JavaScript (c) HTML
38. 38.✍️ What value is given to border in this rule?
    .note {
      padding: 8px;
      border: 2px solid;
      width: 300px;
      color: red;
    } (a) 300px (b) italic (c) border (d) 2px solid
39. 39.💪 Which flexbox property lines boxes up across? (a) gap (b) align-items (c) justify-content (d) flex-direction
40. 40.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 200px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 60px wide (no margins).

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