CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 213 · 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 value is given to font-size in this rule?
   li {
     font-style: italic;
     width: 300px;
     font-size: 20px;
   } (a) font-size (b) yellow (c) 20px (d) center
2. 2.🌈 Which hex code is black? (a) #00ff00 (b) #ffffff (c) #ff00ff (d) #000000
3. 3.🔍 Which is the odd one out? (a) gives the page structure (b) makes headings and lists (c) reacts to a button click (d) makes a link
4. 4.True or false: padding is the gap to other boxes. (a) False (b) True
5. 5.⚖️ What colour is the text of this element?
   <p class="big" id="main">Hi</p>
   CSS:
   #main { color: yellow; }
   #main { color: white; } (a) blue (b) black (c) yellow (d) white
6. 6.✍️ What value is given to color in this rule?
   .box {
     font-style: italic;
     color: red;
     background-color: yellow;
   } (a) 20px (b) color (c) center (d) red
7. 7.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 200px;
     justify-content: flex-start;
   }
   Inside are 2 boxes, each 60px wide (no margins).
8. 8.🧩 Which language checks a quiz answer? (a) HTML (b) CSS (c) JavaScript
9. 9.What does text-align do? (a) picks the font style (b) centres a heading (c) makes the text bold (d) makes letters bigger
10. 10.Which of these is the border? (a) the line round the box (b) the gap round content (c) the text or picture (d) space outside the border
11. 11.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 230px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 40px wide (no margins).
12. 12.🌈 In #00000b the blue part is the hex number 0b. What is it as a normal number?
13. 13.🔍 Which is the odd one out? (a) counts down a timer (b) shows a pop-up message (c) puts a picture on a page (d) reacts to a button click
14. 14.Which of these does CSS do? (a) makes a form box (b) makes a link (c) adds space around boxes (d) puts a picture on a page
15. 15.🖌️ How big is the text, in px?
    h2 {
      font-size: 36px;
      background-color: orange;
      text-align: left;
      color: green;
    }
16. 16.🌈 Which hex code is bright green? (a) #00ffff (b) #ff0000 (c) #00ff00 (d) #ffff00
17. 17.📱 What does a media query check? (a) the screen width (b) the battery level (c) the page title (d) the time of day
18. 18.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 22px;
      }
    }
19. 19.🎯 Which CSS selector matches this element?
    <span class="note" id="intro">Hello</span> (a) .big (b) #intro (c) #note (d) .intro
20. 20.True or false: CSS sets colours and fonts. (a) True (b) False
21. 21.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) packs boxes at the end (c) puts boxes in the middle (d) packs boxes at the start
22. 22.🧩 Which language makes headings and lists? (a) CSS (b) HTML (c) JavaScript
23. 23.🌈 Which colour is rgb(255, 0, 255)? (a) magenta (b) cyan (c) white (d) blue
24. 24.🌈 Hex digits go 0 to 9, then A to which letter? (a) J (b) Z (c) G (d) F
25. 25.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 6px;
      }
    } (a) Yes (b) No
26. 26.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) neither (c) the first one (d) the later one
27. 27.🌈 Which colour is #ff0000? (a) yellow (b) white (c) magenta (d) red
28. 28.🎯 What kind of selector is li? (a) a class selector (b) an id selector (c) an element selector
29. 29.🎯 What kind of selector is .star? (a) a class selector (b) an id selector (c) an element selector
30. 30.💪 Which flexbox property picks row or column? (a) align-items (b) display: flex (c) gap (d) flex-direction
31. 31.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      padding: 8px;
      font-size: 20px;
      text-align: center;
    }
32. 32.✍️ Which property is set to center in this rule?
    .box {
      margin: 10px;
      font-weight: bold;
      font-size: 20px;
      text-align: center;
    } (a) background-color (b) margin (c) center (d) text-align
33. 33.🖌️ Which CSS property picks the font style? (a) font-weight (b) background-color (c) font-size (d) font-family
34. 34.🔍 Which is the odd one out? (a) makes a form box (b) makes headings and lists (c) gives the page structure (d) checks a quiz answer
35. 35.🎯 Which sign starts an id selector? (a) . (b) @ (c) # (d) &
36. 36.✍️ How does a CSS comment start? (a) /* (b) # (c) // (d) <!--
37. 37.🎯 Which sign starts a class selector? (a) # (b) @ (c) & (d) .
38. 38.🌈 Which colour of light is strongest in rgb(69, 188, 32)? (a) green (b) red (c) blue
39. 39.🎯 Which element does the selector #top style? (a) <div class="top"> (b) <div id="intro"> (c) <span class="red"> (d) <div id="top">
40. 40.💪 Which justify-content value packs boxes at the start? (a) flex-start (b) center (c) space-between (d) flex-end

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