CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 640 · 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 gap round content (b) the line round the box (c) the gap to other boxes (d) the text or picture
2. 2.🎯 Which CSS selector matches this element?
   <h1 class="big" id="main">Hello</h1> (a) h2 (b) .big (c) .main (d) #big
3. 3.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 380px;
     justify-content: center;
   }
   Inside are 4 boxes, each 80px wide (no margins).
4. 4.True or false: the content is the gap round content. (a) False (b) True
5. 5.✍️ In color: blue; which part is the value? (a) : (b) blue (c) ; (d) color
6. 6.🎯 What kind of selector is .star? (a) a class selector (b) an id selector (c) an element selector
7. 7.Which of these does CSS do? (a) makes a form box (b) makes headings and lists (c) changes the text size (d) counts down a timer
8. 8.⚖️ Which selector is the weakest? (a) an id selector (b) an element selector (c) a class selector
9. 9.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 190px;
     padding: 20px;
     border: 4px solid black;
     margin: 0px;
   }
10. 10.📱 Which tag helps phones show a page at the right size? (a) the br tag (b) the viewport meta tag (c) the hr tag (d) the title tag
11. 11.🎯 Can many elements share the same class? (a) No (b) Yes
12. 12.⚖️ What colour is the text of this element?
    <p class="box" id="hero">Hi</p>
    CSS:
    .box { color: blue; }
    .box { color: white; } (a) white (b) blue (c) green (d) red
13. 13.True or false: body is an id selector. (a) True (b) False
14. 14.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) 600px or wider (c) turned off (d) 600px or narrower
15. 15.✍️ CSS declarations go inside which brackets? (a) ( ) (b) < > (c) { } (d) [ ]
16. 16.🎯 Which CSS selector matches this element?
    <p class="star" id="hero">Hello</p> (a) p (b) #top (c) .hero (d) #star
17. 17.✍️ What is the selector in this CSS rule?
    p {
      background-color: yellow;
      color: red;
    } (a) background-color (b) p (c) .note (d) red
18. 18.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) 800px or narrower (c) exactly 100px (d) turned off
19. 19.🖌️ What colour is behind the letters?
    h2 {
      color: red;
      font-size: 32px;
      background-color: orange;
      text-align: left;
    } (a) red (b) orange (c) black
20. 20.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 160px;
      justify-content: center;
    }
    Inside are 2 boxes, each 50px wide (no margins).
21. 21.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    } (a) Yes (b) No
22. 22.True or false: CSS lays out the page. (a) False (b) True
23. 23.🌈 Which colour is #ffffff? (a) blue (b) bright green (c) cyan (d) white
24. 24.🌈 Which colour is #ff0000? (a) magenta (b) cyan (c) white (d) red
25. 25.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the shorter one (c) neither (d) the later one
26. 26.🧩 Which language sets colours and fonts? (a) HTML (b) CSS (c) JavaScript
27. 27.🖌️ Which CSS property colours behind the text? (a) text-align (b) font-family (c) background-color (d) color
28. 28.🎯 Which sign starts a class selector? (a) # (b) & (c) @ (d) .
29. 29.⚖️ What colour is the text of this element?
    <h2 class="note" id="intro">Hi</h2>
    CSS:
    #intro { color: blue; }
    .note { color: white; }
    h2 { color: green; } (a) blue (b) red (c) green (d) white
30. 30.What does background-color do? (a) colours behind the text (b) makes the text bold (c) picks the font style (d) centres a heading
31. 31.✍️ Which property is set to bold in this rule?
    .box {
      margin: 10px;
      font-weight: bold;
      font-style: italic;
    } (a) font-weight (b) width (c) bold (d) border
32. 32.True or false: JavaScript checks a quiz answer. (a) True (b) False
33. 33.💪 Which justify-content value puts boxes in the middle? (a) flex-end (b) space-between (c) flex-start (d) center
34. 34.What does justify-content: center 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
35. 35.✍️ Which sign ends each CSS declaration? (a) : (b) . (c) ; (d) ,
36. 36.✍️ How does a CSS comment start? (a) /* (b) // (c) <!-- (d) #
37. 37.🧩 Which language changes the text size? (a) JavaScript (b) HTML (c) CSS
38. 38.🎯 Which sign starts an id selector? (a) @ (b) & (c) # (d) .
39. 39.🌈 Which hex code is white? (a) #000000 (b) #ff0000 (c) #00ffff (d) #ffffff
40. 40.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    }

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