CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 343 · 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 does justify-content: flex-start do? (a) packs boxes at the end (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the start
2. 2.🔍 Which is the odd one out? (a) gives the page structure (b) counts down a timer (c) makes a link (d) makes headings and lists
3. 3.True or false: body is an element selector. (a) False (b) True
4. 4.🌈 In #000097 the blue part is the hex number 97. What is it as a normal number?
5. 5.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (min-width: 600px) {
     p {
       font-size: 28px;
     }
   }
6. 6.Which of these does HTML do? (a) sets colours and fonts (b) makes headings and lists (c) counts down a timer (d) adds space around boxes
7. 7.📱 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
8. 8.🎯 Which CSS selector matches this element?
   <h1 class="big" id="logo">Hello</h1> (a) #big (b) .logo (c) h1 (d) #end
9. 9.🎯 Which element does the selector .menu style? (a) <h1 class="big"> (b) <p id="menu"> (c) <p class="menu"> (d) <p class="note">
10. 10.🖌️ What colour are the letters?
    p {
      text-align: center;
      background-color: red;
      font-size: 36px;
      color: yellow;
    } (a) purple (b) red (c) yellow
11. 11.✍️ Which property is set to red in this rule?
    h2 {
      color: red;
      background-color: yellow;
      width: 300px;
    } (a) red (b) text-align (c) color (d) font-size
12. 12.🧩 Which language sets colours and fonts? (a) JavaScript (b) HTML (c) CSS
13. 13.📦 In the box model, which part is the line round the box? (a) border (b) padding (c) content (d) margin
14. 14.🎯 Which sign starts a class selector? (a) @ (b) # (c) & (d) .
15. 15.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    } (a) Yes (b) No
16. 16.🎯 Which CSS selector matches this element?
    <h2 class="menu" id="intro">Hello</h2> (a) #intro (b) .note (c) li (d) .intro
17. 17.💪 Which flexbox property spaces boxes along a row? (a) gap (b) justify-content (c) align-items (d) display: flex
18. 18.🌈 Which hex code is red? (a) #000000 (b) #ffffff (c) #ff0000 (d) #00ff00
19. 19.💪 Which justify-content value packs boxes at the end? (a) flex-end (b) space-between (c) flex-start (d) center
20. 20.Which of these does CSS do? (a) shows a pop-up message (b) gives the page structure (c) changes the page live (d) lays out the page
21. 21.⚖️ What colour is the text of this element?
    <p class="star" id="main">Hi</p>
    CSS:
    .star { color: purple; }
    .star { color: orange; } (a) red (b) purple (c) white (d) orange
22. 22.📱 Responsive design means a page ___. (a) fits every screen (b) is only for laptops (c) never changes (d) has no pictures
23. 23.⚖️ What colour is the text of this element?
    <h1 class="star" id="end">Hi</h1>
    CSS:
    h1 { color: black; }
    h1 { color: purple; } (a) orange (b) black (c) purple (d) blue
24. 24.🎯 What kind of selector is h1? (a) an id selector (b) a class selector (c) an element selector
25. 25.🎨 One CSS file can style how many pages? (a) only one image (b) many pages (c) only one word (d) no pages
26. 26.✍️ Which property is set to 10px in this rule?
    h2 {
      padding: 8px;
      font-weight: bold;
      margin: 10px;
    } (a) font-weight (b) padding (c) margin (d) 10px
27. 27.🖌️ Where does the text sit on its line?
    p {
      background-color: orange;
      color: blue;
      font-size: 24px;
      text-align: right;
    } (a) on the left (b) on the right (c) in the middle
28. 28.True or false: JavaScript sets colours and fonts. (a) True (b) False
29. 29.💪 Which justify-content value equal gaps, none at ends? (a) flex-end (b) flex-start (c) center (d) space-between
30. 30.🎨 Which tag connects an outside CSS file? (a) <css> (b) <link> (c) <img> (d) <a>
31. 31.🔍 Which is the odd one out? (a) gives the page structure (b) puts a picture on a page (c) lays out the page (d) makes a form box
32. 32.🌈 Which colour is #ff00ff? (a) white (b) bright green (c) cyan (d) magenta
33. 33.True or false: JavaScript changes the page live. (a) True (b) False
34. 34.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 320px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 80px wide (no margins).
35. 35.✍️ In color: blue; which part is the value? (a) color (b) blue (c) : (d) ;
36. 36.🔍 Which is the odd one out? (a) rounds box corners (b) lays out the page (c) adds space around boxes (d) gives the page structure
37. 37.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the first one (c) neither (d) the later one
38. 38.🎯 What kind of selector is #main? (a) an id selector (b) a class selector (c) an element selector
39. 39.🔍 Which is the odd one out? (a) sets colours and fonts (b) adds space around boxes (c) rounds box corners (d) reacts to a button click
40. 40.What does font-family do? (a) makes letters bigger (b) picks the font style (c) colours behind the text (d) sets the letter colour

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