CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 411 · 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 colour is behind the letters?
   li {
     background-color: red;
     text-align: center;
     font-size: 16px;
     color: purple;
   } (a) purple (b) orange (c) red
2. 2.🌈 In #0000f3 the blue part is the hex number f3. What is it as a normal number?
3. 3.📦 In the box model, which part is the text or picture? (a) content (b) padding (c) margin (d) border
4. 4.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 22px;
     }
   }
5. 5.🎯 How many elements on a page should have the same id? (a) 5 (b) 1 (c) 2 (d) any number
6. 6.🎯 Which CSS selector matches this element?
   <div class="box" id="intro">Hello</div> (a) #main (b) #box (c) .intro (d) div
7. 7.✍️ In color: blue; which part is the value? (a) ; (b) color (c) blue (d) :
8. 8.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) 800px or wider (c) exactly 100px (d) turned off
9. 9.⚖️ What colour is the text of this element?
   <p class="menu" id="logo">Hi</p>
   CSS:
   p { color: yellow; }
   p { color: orange; } (a) orange (b) blue (c) white (d) yellow
10. 10.Which of these is the content? (a) the line round the box (b) the gap round content (c) the gap to other boxes (d) the text or picture
11. 11.⚖️ What colour is the text of this element?
    <h2 class="big" id="main">Hi</h2>
    CSS:
    .big { color: black; }
    .big { color: red; } (a) purple (b) red (c) black (d) orange
12. 12.🖌️ What colour is behind the letters?
    h1 {
      background-color: yellow;
      color: red;
      font-size: 28px;
      text-align: left;
    } (a) yellow (b) red (c) orange
13. 13.🌈 Which colour is rgb(255, 0, 0)? (a) black (b) bright green (c) red (d) blue
14. 14.⚖️ What colour is the text of this element?
    <h2 class="box" id="intro">Hi</h2>
    CSS:
    .box { color: green; }
    #intro { color: red; }
    h2 { color: white; } (a) red (b) orange (c) green (d) white
15. 15.🌈 Which colour is #ff0000? (a) black (b) red (c) magenta (d) yellow
16. 16.🧩 Which language changes the page live? (a) JavaScript (b) CSS (c) HTML
17. 17.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 60px;
      padding: 30px;
      border: 5px solid black;
      margin: 15px;
    }
18. 18.📦 In the box model, which part is the gap round content? (a) border (b) padding (c) content (d) margin
19. 19.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 60px;
      padding: 30px;
      border: 4px solid black;
      margin: 10px;
    }
20. 20.What does color do? (a) centres a heading (b) picks the font style (c) sets the letter colour (d) colours behind the text
21. 21.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 270px;
      padding: 5px;
      border: 3px solid black;
      margin: 5px;
    }
22. 22.Which of these is the border? (a) the line round the box (b) the gap round content (c) space inside the border (d) the gap to other boxes
23. 23.🖌️ Which CSS property makes the text bold? (a) font-size (b) background-color (c) color (d) font-weight
24. 24.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) green (c) red (d) black
25. 25.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the first one (c) the later one (d) the shorter one
26. 26.What does justify-content: flex-end do? (a) puts boxes in the middle (b) equal gaps, none at ends (c) packs boxes at the start (d) packs boxes at the end
27. 27.🧩 Which language reacts to a button click? (a) JavaScript (b) CSS (c) HTML
28. 28.🎯 Which element does the selector #end style? (a) <p id="hero"> (b) <h1 class="big"> (c) <p id="end"> (d) <p class="end">
29. 29.🎯 What kind of selector is li? (a) a class selector (b) an id selector (c) an element selector
30. 30.🌈 Which hex code is blue? (a) #00ff00 (b) #000000 (c) #ffffff (d) #0000ff
31. 31.🌈 Which colour of light is strongest in rgb(3, 91, 202)? (a) blue (b) green (c) red
32. 32.What does font-weight do? (a) makes the text bold (b) sets the letter colour (c) makes letters bigger (d) centres a heading
33. 33.✍️ CSS declarations go inside which brackets? (a) < > (b) [ ] (c) { } (d) ( )
34. 34.⚖️ What colour is the text of this element?
    <h2 class="star" id="hero">Hi</h2>
    CSS:
    h2 { color: white; }
    h2 { color: red; } (a) white (b) yellow (c) orange (d) red
35. 35.Which of these does HTML do? (a) sets colours and fonts (b) makes headings and lists (c) counts down a timer (d) lays out the page
36. 36.What does font-family do? (a) colours behind the text (b) picks the font style (c) makes letters bigger (d) centres a heading
37. 37.What does font-size do? (a) sets the letter colour (b) makes the text bold (c) makes letters bigger (d) centres a heading
38. 38.🎯 Which CSS selector matches this element?
    <span class="star" id="intro">Hello</span> (a) #star (b) #main (c) .star (d) .menu
39. 39.🔍 Which is the odd one out? (a) makes a link (b) changes the page live (c) gives the page structure (d) makes a form box
40. 40.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector

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