CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 66 · 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) reacts to a button click (b) gives the page structure (c) changes the text size (d) makes a link
2. 2.⚖️ What colour is the text of this element?
   <h2 class="box" id="logo">Hi</h2>
   CSS:
   .box { color: green; }
   .box { color: red; } (a) red (b) black (c) green (d) orange
3. 3.🎯 Which element does the selector .menu style? (a) <div class="big"> (b) <li class="menu"> (c) <li class="note"> (d) <li id="menu">
4. 4.✍️ What is the selector in this CSS rule?
   h2 {
     border: 2px solid;
     width: 300px;
     margin: 10px;
   } (a) border (b) 300px (c) h1 (d) h2
5. 5.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 210px;
     justify-content: flex-start;
   }
   Inside are 4 boxes, each 50px wide (no margins).
6. 6.⚖️ What colour is the text of this element?
   <h2 class="menu" id="hero">Hi</h2>
   CSS:
   h2 { color: orange; }
   .menu { color: blue; }
   #hero { color: green; } (a) yellow (b) orange (c) green (d) blue
7. 7.✍️ How many declarations (property: value pairs) are in this rule?
   h1 {
     font-size: 20px;
     font-style: italic;
     font-weight: bold;
     width: 300px;
   }
8. 8.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 26px;
     }
   }
9. 9.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 100px;
     padding: 25px;
     border: 5px solid black;
     margin: 5px;
   }
10. 10.🖌️ Which CSS property colours behind the text? (a) background-color (b) text-align (c) font-family (d) font-weight
11. 11.🌈 What is the biggest number one colour can have in rgb()? (a) 1000 (b) 100 (c) 255 (d) 99
12. 12.🎯 Which CSS selector matches this element?
    <li class="star" id="intro">Hello</li> (a) #main (b) div (c) .star (d) .intro
13. 13.🌈 Which hex code is white? (a) #0000ff (b) #ffffff (c) #ff00ff (d) #ff0000
14. 14.⚖️ What colour is the text of this element?
    <h1 class="star" id="main">Hi</h1>
    CSS:
    h1 { color: orange; }
    .star { color: yellow; }
    #main { color: white; } (a) orange (b) yellow (c) purple (d) white
15. 15.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) flex-end (c) center (d) space-between
16. 16.🎯 What kind of selector is .card? (a) an id selector (b) an element selector (c) a class selector
17. 17.⚖️ What colour is the text of this element?
    <h1 class="big" id="hero">Hi</h1>
    CSS:
    h1 { color: purple; }
    h1 { color: yellow; } (a) yellow (b) purple (c) blue (d) black
18. 18.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 4 (b) 6 (c) 2 (d) 3
19. 19.🌈 Which hex code is red? (a) #0000ff (b) #ff0000 (c) #ffff00 (d) #ff00ff
20. 20.🔍 Which is the odd one out? (a) gives the page structure (b) makes a link (c) puts a picture on a page (d) sets colours and fonts
21. 21.✍️ CSS declarations go inside which brackets? (a) [ ] (b) < > (c) { } (d) ( )
22. 22.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      padding: 8px;
    }
23. 23.🧩 Which language counts down a timer? (a) HTML (b) CSS (c) JavaScript
24. 24.🌈 Which colour is #ff00ff? (a) white (b) bright green (c) red (d) magenta
25. 25.True or false: .card is an id selector. (a) True (b) False
26. 26.🖌️ Where does the text sit on its line?
    li {
      font-size: 12px;
      color: white;
      text-align: left;
      background-color: black;
    } (a) on the right (b) in the middle (c) on the left
27. 27.True or false: HTML sets colours and fonts. (a) True (b) False
28. 28.📱 Which tag helps phones show a page at the right size? (a) the viewport meta tag (b) the title tag (c) the br tag (d) the hr tag
29. 29.🌈 In #b70000 the red part is the hex number b7. What is it as a normal number?
30. 30.🖌️ What colour is behind the letters?
    h2 {
      background-color: purple;
      font-size: 20px;
      color: blue;
      text-align: center;
    } (a) blue (b) orange (c) purple
31. 31.💪 Which flexbox property turns on flexbox? (a) gap (b) align-items (c) justify-content (d) display: flex
32. 32.Which of these is the content? (a) the gap to other boxes (b) the text or picture (c) a solid or dotted edge (d) space inside the border
33. 33.🔍 Which is the odd one out? (a) changes the text size (b) lays out the page (c) adds space around boxes (d) puts a picture on a page
34. 34.Which of these does HTML do? (a) sets colours and fonts (b) changes the text size (c) reacts to a button click (d) gives the page structure
35. 35.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 110px;
      padding: 20px;
      border: 4px solid black;
      margin: 0px;
    }
36. 36.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) turned off (c) exactly 1000px (d) 600px or wider
37. 37.What does font-family do? (a) makes letters bigger (b) makes the text bold (c) colours behind the text (d) picks the font style
38. 38.Which of these is the border? (a) space outside the border (b) a solid or dotted edge (c) the text or picture (d) the gap to other boxes
39. 39.🧩 Which language puts a picture on a page? (a) JavaScript (b) HTML (c) CSS
40. 40.Which of these is the border? (a) the line round the box (b) the text or picture (c) the gap round content (d) space outside the border

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