CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 575 · 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 does JavaScript do? (a) makes a link (b) puts a picture on a page (c) lays out the page (d) shows a pop-up message
2. 2.📦 In the box model, which part is space inside the border? (a) margin (b) padding (c) border (d) content
3. 3.💪 Which flexbox property picks row or column? (a) gap (b) justify-content (c) align-items (d) flex-direction
4. 4.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 160px;
     justify-content: flex-start;
   }
   Inside are 3 boxes, each 50px wide (no margins).
5. 5.✍️ How many declarations (property: value pairs) are in this rule?
   body {
     font-style: italic;
     border: 2px solid;
   }
6. 6.🌈 Which colour is #00ffff? (a) magenta (b) red (c) black (d) cyan
7. 7.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 250px;
     justify-content: flex-start;
   }
   Inside are 3 boxes, each 80px wide (no margins).
8. 8.🌈 Which colour is rgb(255, 0, 255)? (a) red (b) black (c) magenta (d) bright green
9. 9.🎯 Which CSS selector matches this element?
   <li class="star" id="intro">Hello</li> (a) #main (b) .intro (c) #intro (d) div
10. 10.🌈 Which colour is #000000? (a) red (b) yellow (c) black (d) bright green
11. 11.⚖️ What colour is the text of this element?
    <p class="box" id="logo">Hi</p>
    CSS:
    #logo { color: white; }
    p { color: black; } (a) red (b) white (c) orange (d) black
12. 12.✍️ What is the selector in this CSS rule?
    .note {
      padding: 8px;
      font-size: 20px;
      text-align: center;
      border: 2px solid;
    } (a) padding (b) 20px (c) #top (d) .note
13. 13.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) red (c) black (d) green
14. 14.🌈 Which colour is #00ff00? (a) bright green (b) magenta (c) yellow (d) blue
15. 15.🌈 Which colour of light is strongest in rgb(25, 238, 102)? (a) blue (b) red (c) green
16. 16.True or false: the border is the gap round content. (a) False (b) True
17. 17.🔍 Which is the odd one out? (a) makes a form box (b) checks a quiz answer (c) shows a pop-up message (d) counts down a timer
18. 18.True or false: HTML reacts to a button click. (a) False (b) True
19. 19.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) exactly 100px (c) 800px or wider (d) turned off
20. 20.✍️ What is the selector in this CSS rule?
    body {
      font-weight: bold;
      font-style: italic;
    } (a) italic (b) .box (c) body (d) font-weight
21. 21.📱 What does a media query check? (a) the time of day (b) the page title (c) the battery level (d) the screen width
22. 22.⚖️ What colour is the text of this element?
    <h1 class="note" id="intro">Hi</h1>
    CSS:
    .note { color: white; }
    .note { color: orange; } (a) orange (b) blue (c) yellow (d) white
23. 23.🖌️ What colour are the letters?
    h2 {
      background-color: blue;
      font-size: 40px;
      color: purple;
      text-align: left;
    } (a) blue (b) purple (c) orange
24. 24.What does justify-content: flex-start do? (a) packs boxes at the end (b) equal gaps, none at ends (c) packs boxes at the start (d) puts boxes in the middle
25. 25.✍️ What is the selector in this CSS rule?
    h2 {
      margin: 10px;
      background-color: yellow;
      width: 300px;
      font-size: 20px;
    } (a) margin (b) yellow (c) h2 (d) h1
26. 26.✍️ CSS declarations go inside which brackets? (a) ( ) (b) < > (c) [ ] (d) { }
27. 27.🌈 In #c00000 the red part is the hex number c0. What is it as a normal number?
28. 28.💪 Which justify-content value packs boxes at the start? (a) space-between (b) flex-end (c) flex-start (d) center
29. 29.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 16px;
      }
    }
30. 30.🎯 Which CSS selector matches this element?
    <p class="note" id="intro">Hello</p> (a) #note (b) h1 (c) .note (d) .intro
31. 31.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the later one (c) neither (d) the shorter one
32. 32.Which of these is the border? (a) space outside the border (b) the line round the box (c) the gap round content (d) the text or picture
33. 33.🔍 Which is the odd one out? (a) sets colours and fonts (b) puts a picture on a page (c) makes headings and lists (d) makes a form box
34. 34.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
35. 35.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 14px;
      }
    } (a) Yes (b) No
36. 36.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 340px;
      justify-content: center;
    }
    Inside are 4 boxes, each 60px wide (no margins).
37. 37.⚖️ What colour is the text of this element?
    <p class="red" id="logo">Hi</p>
    CSS:
    .red { color: orange; }
    #logo { color: blue; }
    p { color: purple; } (a) orange (b) purple (c) yellow (d) blue
38. 38.True or false: CSS changes the text size. (a) False (b) True
39. 39.🌈 Which colour is #ffffff? (a) magenta (b) blue (c) white (d) bright green
40. 40.✍️ Which property is set to 10px in this rule?
    .box {
      font-size: 20px;
      margin: 10px;
      background-color: yellow;
    } (a) padding (b) font-weight (c) 10px (d) margin

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