CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 416 · 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 colour of light is strongest in rgb(102, 65, 203)? (a) red (b) green (c) blue
2. 2.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 210px;
     justify-content: flex-end;
   }
   Inside are 3 boxes, each 50px wide (no margins).
3. 3.🎯 Which CSS selector matches this element?
   <span class="red" id="hero">Hello</span> (a) .red (b) .box (c) #red (d) p
4. 4.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) exactly 100px (c) turned off (d) 800px or wider
5. 5.🔍 Which is the odd one out? (a) changes the text size (b) rounds box corners (c) adds space around boxes (d) checks a quiz answer
6. 6.🖌️ Where does the text sit on its line?
   p {
     color: yellow;
     background-color: green;
     font-size: 40px;
     text-align: left;
   } (a) on the left (b) in the middle (c) on the right
7. 7.✍️ CSS declarations go inside which brackets? (a) ( ) (b) < > (c) [ ] (d) { }
8. 8.📱 Which tag helps phones show a page at the right size? (a) the br tag (b) the hr tag (c) the title tag (d) the viewport meta tag
9. 9.🌈 Which colour is rgb(255, 0, 255)? (a) magenta (b) bright green (c) white (d) black
10. 10.✍️ Which sign ends each CSS declaration? (a) : (b) , (c) . (d) ;
11. 11.✍️ What value is given to margin in this rule?
    .box {
      width: 300px;
      margin: 10px;
    } (a) 8px (b) bold (c) 10px (d) margin
12. 12.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
13. 13.🎯 Which CSS selector matches this element?
    <div class="box" id="intro">Hello</div> (a) #main (b) span (c) div (d) #box
14. 14.🖌️ What colour is behind the letters?
    p {
      background-color: green;
      text-align: center;
      color: purple;
      font-size: 24px;
    } (a) blue (b) green (c) purple
15. 15.⚖️ What colour is the text of this element?
    <h2 class="box" id="hero">Hi</h2>
    CSS:
    .box { color: green; }
    h2 { color: red; }
    #hero { color: orange; } (a) red (b) yellow (c) green (d) orange
16. 16.Which of these is the content? (a) space outside the border (b) the gap round content (c) a solid or dotted edge (d) the text or picture
17. 17.🎯 Which CSS selector matches this element?
    <p class="menu" id="logo">Hello</p> (a) #menu (b) h1 (c) p (d) .logo
18. 18.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 8px;
      }
    } (a) Yes (b) No
19. 19.🖌️ What colour are the letters?
    p {
      font-size: 20px;
      text-align: center;
      color: orange;
      background-color: black;
    } (a) red (b) orange (c) black
20. 20.🎯 Which CSS selector matches this element?
    <h2 class="big" id="end">Hello</h2> (a) li (b) #end (c) #big (d) .end
21. 21.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the shorter one (c) the later one (d) the first one
22. 22.🖌️ How big is the text, in px?
    h1 {
      text-align: right;
      background-color: orange;
      color: purple;
      font-size: 20px;
    }
23. 23.✍️ Which property is set to center in this rule?
    li {
      padding: 8px;
      text-align: center;
      border: 2px solid;
      width: 300px;
    } (a) background-color (b) center (c) margin (d) text-align
24. 24.🖌️ Which CSS property colours behind the text? (a) text-align (b) background-color (c) color (d) font-family
25. 25.Which of these does HTML do? (a) reacts to a button click (b) adds space around boxes (c) gives the page structure (d) lays out the page
26. 26.Which of these is the border? (a) the gap round content (b) space inside the border (c) the text or picture (d) the line round the box
27. 27.🧩 Which language sets colours and fonts? (a) HTML (b) JavaScript (c) CSS
28. 28.True or false: JavaScript gives the page structure. (a) True (b) False
29. 29.Which of these does JavaScript do? (a) makes a link (b) gives the page structure (c) changes the page live (d) lays out the page
30. 30.🎯 What kind of selector is .note? (a) an id selector (b) a class selector (c) an element selector
31. 31.🖌️ Where does the text sit on its line?
    h2 {
      background-color: yellow;
      font-size: 40px;
      color: black;
      text-align: center;
    } (a) on the left (b) in the middle (c) on the right
32. 32.Which of these does CSS do? (a) lays out the page (b) gives the page structure (c) counts down a timer (d) puts a picture on a page
33. 33.✍️ Which property is set to 2px solid in this rule?
    h1 {
      border: 2px solid;
      margin: 10px;
      padding: 8px;
      font-size: 20px;
    } (a) width (b) font-style (c) border (d) 2px solid
34. 34.🎨 What does CSS stand for? (a) Cascading Style Sheets (b) Colourful Site Styles (c) Computer Style Sheets (d) Creative Sheet System
35. 35.True or false: img is an element selector. (a) True (b) False
36. 36.🔍 Which is the odd one out? (a) gives the page structure (b) makes a link (c) reacts to a button click (d) makes a form box
37. 37.💪 Which flexbox property lines boxes up across? (a) justify-content (b) align-items (c) display: flex (d) flex-direction
38. 38.🖌️ What colour is behind the letters?
    h2 {
      text-align: left;
      background-color: purple;
      color: orange;
      font-size: 40px;
    } (a) orange (b) purple (c) red
39. 39.⚖️ What colour is the text of this element?
    <h2 class="red" id="hero">Hi</h2>
    CSS:
    .red { color: green; }
    .red { color: yellow; } (a) purple (b) blue (c) yellow (d) green
40. 40.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 6px;
      }
    }

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