CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 394 · 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 is the odd one out? (a) checks a quiz answer (b) makes a form box (c) reacts to a button click (d) counts down a timer
2. 2.What does font-family do? (a) makes letters bigger (b) centres a heading (c) picks the font style (d) sets the letter colour
3. 3.🔍 Which is the odd one out? (a) sets colours and fonts (b) makes a link (c) adds space around boxes (d) rounds box corners
4. 4.🌈 Which colour is #0000ff? (a) blue (b) white (c) magenta (d) cyan
5. 5.True or false: HTML adds space around boxes. (a) False (b) True
6. 6.💪 Which flexbox property turns on flexbox? (a) align-items (b) gap (c) justify-content (d) display: flex
7. 7.🌈 Which colour is #ffffff? (a) blue (b) magenta (c) red (d) white
8. 8.🔍 Which is the odd one out? (a) reacts to a button click (b) changes the page live (c) lays out the page (d) counts down a timer
9. 9.🎨 One CSS file can style how many pages? (a) only one image (b) only one word (c) no pages (d) many pages
10. 10.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      width: 300px;
      font-style: italic;
    }
11. 11.⚖️ What colour is the text of this element?
    <p class="note" id="top">Hi</p>
    CSS:
    .note { color: black; }
    .note { color: green; } (a) orange (b) black (c) red (d) green
12. 12.✍️ What value is given to font-style in this rule?
    .note {
      width: 300px;
      font-style: italic;
      padding: 8px;
    } (a) italic (b) 20px (c) red (d) font-style
13. 13.🌈 In #rrggbb, which colour do the last two digits give? (a) green (b) blue (c) red (d) white
14. 14.True or false: JavaScript counts down a timer. (a) True (b) False
15. 15.🌈 Hex digits go 0 to 9, then A to which letter? (a) F (b) J (c) Z (d) G
16. 16.✍️ What is the selector in this CSS rule?
    .box {
      font-weight: bold;
      color: red;
      font-size: 20px;
      text-align: center;
    } (a) font-weight (b) red (c) h2 (d) .box
17. 17.🎨 What does CSS stand for? (a) Colourful Site Styles (b) Computer Style Sheets (c) Cascading Style Sheets (d) Creative Sheet System
18. 18.🖌️ What colour is behind the letters?
    h1 {
      text-align: center;
      color: black;
      font-size: 24px;
      background-color: orange;
    } (a) purple (b) orange (c) black
19. 19.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) turned off (c) 800px or wider (d) exactly 100px
20. 20.What does justify-content: flex-end do? (a) packs boxes at the end (b) packs boxes at the start (c) equal gaps, none at ends (d) puts boxes in the middle
21. 21.⚖️ What colour is the text of this element?
    <h2 class="star" id="main">Hi</h2>
    CSS:
    #main { color: purple; }
    #main { color: yellow; } (a) red (b) yellow (c) purple (d) black
22. 22.🖌️ What colour are the letters?
    h2 {
      color: red;
      font-size: 32px;
      background-color: orange;
      text-align: center;
    } (a) red (b) black (c) orange
23. 23.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 130px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 40px wide (no margins).
24. 24.True or false: the content is the gap to other boxes. (a) True (b) False
25. 25.⚖️ What colour is the text of this element?
    <h1 class="big" id="main">Hi</h1>
    CSS:
    .big { color: purple; }
    #main { color: yellow; }
    h1 { color: white; } (a) white (b) red (c) yellow (d) purple
26. 26.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    }
27. 27.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 290px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 50px wide (no margins).
28. 28.Which of these is padding? (a) the line round the box (b) space outside the border (c) the text or picture (d) space inside the border
29. 29.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
30. 30.🌈 Which hex code is bright green? (a) #ffffff (b) #00ff00 (c) #ff0000 (d) #ffff00
31. 31.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    }
32. 32.⚖️ What colour is the text of this element?
    <h2 class="big" id="intro">Hi</h2>
    CSS:
    h2 { color: green; }
    h2 { color: black; } (a) red (b) green (c) black (d) blue
33. 33.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 470px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 100px wide (no margins).
34. 34.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the first one (c) the shorter one (d) the later one
35. 35.⚖️ What colour is the text of this element?
    <p class="box" id="end">Hi</p>
    CSS:
    #end { color: green; }
    #end { color: blue; } (a) blue (b) white (c) black (d) green
36. 36.What does justify-content: flex-start do? (a) packs boxes at the end (b) packs boxes at the start (c) equal gaps, none at ends (d) puts boxes in the middle
37. 37.⚖️ What colour is the text of this element?
    <h2 class="big" id="hero">Hi</h2>
    CSS:
    #hero { color: blue; }
    #hero { color: red; } (a) black (b) red (c) green (d) blue
38. 38.🔍 Which is the odd one out? (a) gives the page structure (b) sets colours and fonts (c) makes headings and lists (d) puts a picture on a page
39. 39.🎯 What kind of selector is img? (a) an element selector (b) a class selector (c) an id selector
40. 40.🖌️ Which CSS property centres a heading? (a) font-weight (b) text-align (c) background-color (d) color

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