CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 809 · 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 the text of this element?
   <h2 class="note" id="hero">Hi</h2>
   CSS:
   #hero { color: black; }
   #hero { color: blue; } (a) black (b) orange (c) yellow (d) blue
2. 2.📱 The screen is 414px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 26px;
     }
   } (a) No (b) Yes
3. 3.🖌️ How big is the text, in px?
   p {
     background-color: green;
     color: blue;
     text-align: right;
     font-size: 12px;
   }
4. 4.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) neither (c) the later one (d) the first one
5. 5.🎯 How many elements on a page should have the same id? (a) 5 (b) 2 (c) any number (d) 1
6. 6.True or false: #top is an id selector. (a) False (b) True
7. 7.🎯 Which element does the selector #intro style? (a) <li class="intro"> (b) <li id="main"> (c) <div class="box"> (d) <li id="intro">
8. 8.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 370px;
     justify-content: flex-end;
   }
   Inside are 4 boxes, each 80px wide (no margins).
9. 9.📱 What does a media query check? (a) the screen width (b) the battery level (c) the time of day (d) the page title
10. 10.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      background-color: yellow;
      text-align: center;
      color: red;
      font-style: italic;
    }
11. 11.🎨 Which tag holds CSS inside the head? (a) <css> (b) <body> (c) <script> (d) <style>
12. 12.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 370px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 100px wide (no margins).
13. 13.📱 Responsive design means a page ___. (a) fits every screen (b) has no pictures (c) is only for laptops (d) never changes
14. 14.⚖️ What colour is the text of this element?
    <h1 class="menu" id="intro">Hi</h1>
    CSS:
    .menu { color: yellow; }
    .menu { color: red; } (a) black (b) yellow (c) red (d) orange
15. 15.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 140px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 50px wide (no margins).
16. 16.🎨 Which attribute adds CSS inside one tag? (a) alt (b) style (c) href (d) src
17. 17.🔍 Which is the odd one out? (a) makes a link (b) changes the text size (c) adds space around boxes (d) lays out the page
18. 18.💪 Which flexbox property turns on flexbox? (a) align-items (b) justify-content (c) display: flex (d) flex-direction
19. 19.📦 In the box model, which part is space inside the border? (a) padding (b) content (c) margin (d) border
20. 20.🌈 Hex digits go 0 to 9, then A to which letter? (a) G (b) Z (c) F (d) J
21. 21.🧩 Which language checks a quiz answer? (a) HTML (b) CSS (c) JavaScript
22. 22.🔍 Which is the odd one out? (a) puts a picture on a page (b) checks a quiz answer (c) makes a link (d) makes headings and lists
23. 23.🎯 What kind of selector is #logo? (a) a class selector (b) an element selector (c) an id selector
24. 24.Which of these does HTML do? (a) changes the page live (b) rounds box corners (c) changes the text size (d) makes a link
25. 25.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 320px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 100px wide (no margins).
26. 26.✍️ In color: blue; which part is the value? (a) color (b) blue (c) ; (d) :
27. 27.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 120px;
      padding: 20px;
      border: 3px solid black;
      margin: 20px;
    }
28. 28.🌈 Which colour is #0000ff? (a) red (b) blue (c) black (d) cyan
29. 29.🌈 Which colour is #ff00ff? (a) red (b) magenta (c) white (d) blue
30. 30.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 180px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 50px wide (no margins).
31. 31.🖌️ What colour are the letters?
    h1 {
      background-color: yellow;
      text-align: center;
      font-size: 36px;
      color: purple;
    } (a) black (b) yellow (c) purple
32. 32.🖌️ How big is the text, in px?
    p {
      text-align: left;
      font-size: 28px;
      background-color: green;
      color: red;
    }
33. 33.True or false: p is an element selector. (a) False (b) True
34. 34.🔍 Which is the odd one out? (a) adds space around boxes (b) lays out the page (c) gives the page structure (d) sets colours and fonts
35. 35.🎯 Which CSS selector matches this element?
    <span class="box" id="hero">Hello</span> (a) #hero (b) #box (c) #top (d) p
36. 36.🧩 Which language shows a pop-up message? (a) HTML (b) CSS (c) JavaScript
37. 37.💪 Which justify-content value packs boxes at the end? (a) flex-start (b) flex-end (c) center (d) space-between
38. 38.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 280px;
      padding: 25px;
      border: 4px solid black;
      margin: 10px;
    }
39. 39.⚖️ Which selector is the weakest? (a) a class selector (b) an element selector (c) an id selector
40. 40.⚖️ What colour is the text of this element?
    <h2 class="note" id="logo">Hi</h2>
    CSS:
    h2 { color: black; }
    #logo { color: purple; } (a) black (b) white (c) yellow (d) purple

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