CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 878 · 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 selector is the weakest? (a) an element selector (b) an id selector (c) a class selector
2. 2.🎯 Which element does the selector #end style? (a) <li class="box"> (b) <h2 class="end"> (c) <h2 id="hero"> (d) <h2 id="end">
3. 3.🖌️ What colour are the letters?
   p {
     color: orange;
     background-color: black;
     font-size: 12px;
     text-align: right;
   } (a) black (b) orange (c) white
4. 4.Which of these is the border? (a) the gap round content (b) the text or picture (c) the line round the box (d) space outside the border
5. 5.Which of these does CSS do? (a) gives the page structure (b) makes a link (c) makes a form box (d) changes the text size
6. 6.🎨 Which tag holds CSS inside the head? (a) <css> (b) <script> (c) <body> (d) <style>
7. 7.⚖️ What colour is the text of this element?
   <h1 class="box" id="intro">Hi</h1>
   CSS:
   h1 { color: red; }
   h1 { color: green; } (a) blue (b) green (c) red (d) yellow
8. 8.⚖️ What colour is the text of this element?
   <h2 class="note" id="main">Hi</h2>
   CSS:
   #main { color: orange; }
   #main { color: blue; } (a) yellow (b) blue (c) green (d) orange
9. 9.🔍 Which is the odd one out? (a) puts a picture on a page (b) reacts to a button click (c) makes a link (d) makes headings and lists
10. 10.🖌️ How big is the text, in px?
    h2 {
      background-color: yellow;
      text-align: left;
      font-size: 36px;
      color: blue;
    }
11. 11.✍️ CSS declarations go inside which brackets? (a) [ ] (b) ( ) (c) < > (d) { }
12. 12.🧩 Which language rounds box corners? (a) JavaScript (b) CSS (c) HTML
13. 13.🌈 Which hex code is cyan? (a) #0000ff (b) #00ffff (c) #ff0000 (d) #00ff00
14. 14.✍️ What is the selector in this CSS rule?
    li {
      text-align: center;
      font-weight: bold;
      color: red;
    } (a) text-align (b) li (c) bold (d) body
15. 15.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the end (d) packs boxes at the start
16. 16.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 380px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 80px wide (no margins).
17. 17.Which of these does JavaScript do? (a) rounds box corners (b) counts down a timer (c) puts a picture on a page (d) changes the text size
18. 18.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 14px;
      }
    }
19. 19.True or false: HTML reacts to a button click. (a) False (b) True
20. 20.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 400px;
      justify-content: center;
    }
    Inside are 4 boxes, each 80px wide (no margins).
21. 21.✍️ What is the selector in this CSS rule?
    body {
      margin: 10px;
      font-size: 20px;
      color: red;
    } (a) body (b) margin (c) 20px (d) .box
22. 22.True or false: #logo is an element selector. (a) False (b) True
23. 23.Which of these does HTML do? (a) makes headings and lists (b) adds space around boxes (c) checks a quiz answer (d) changes the text size
24. 24.✍️ What is the selector in this CSS rule?
    li {
      font-weight: bold;
      width: 300px;
      text-align: center;
    } (a) font-weight (b) li (c) 300px (d) body
25. 25.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 220px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 80px wide (no margins).
26. 26.🎯 Which sign starts an id selector? (a) # (b) & (c) . (d) @
27. 27.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) the shorter one (c) the first one (d) neither
28. 28.🎯 Which CSS selector matches this element?
    <h1 class="red" id="intro">Hello</h1> (a) .intro (b) h2 (c) .red (d) #main
29. 29.📦 In the box model, which part is the text or picture? (a) border (b) content (c) margin (d) padding
30. 30.🎯 Which CSS selector matches this element?
    <h2 class="menu" id="main">Hello</h2> (a) #logo (b) li (c) .note (d) .menu
31. 31.💪 Which flexbox property picks row or column? (a) flex-direction (b) justify-content (c) display: flex (d) align-items
32. 32.🌈 Which colour is rgb(255, 0, 0)? (a) black (b) magenta (c) blue (d) red
33. 33.True or false: JavaScript shows a pop-up message. (a) False (b) True
34. 34.📦 In the box model, which part is the line round the box? (a) content (b) padding (c) border (d) margin
35. 35.True or false: the border is a solid or dotted edge. (a) True (b) False
36. 36.🎯 Which CSS selector matches this element?
    <h1 class="box" id="logo">Hello</h1> (a) .star (b) .logo (c) .box (d) #end
37. 37.Which of these does CSS do? (a) changes the page live (b) shows a pop-up message (c) adds space around boxes (d) makes headings and lists
38. 38.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
39. 39.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 24px;
      }
    } (a) No (b) Yes
40. 40.📦 In the box model, which part is the gap round content? (a) content (b) margin (c) padding (d) border

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