CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 680 · 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 CSS selector matches this element?
   <span class="star" id="intro">Hello</span> (a) p (b) .intro (c) .menu (d) span
2. 2.✍️ What value is given to padding in this rule?
   .box {
     color: red;
     padding: 8px;
     border: 2px solid;
     font-style: italic;
   } (a) padding (b) 8px (c) bold (d) 2px solid
3. 3.⚖️ Which selector is the strongest? (a) an element selector (b) an id selector (c) a class selector
4. 4.Which of these does HTML do? (a) sets colours and fonts (b) shows a pop-up message (c) changes the text size (d) puts a picture on a page
5. 5.🌈 Which hex code is white? (a) #ff0000 (b) #00ffff (c) #ffffff (d) #ff00ff
6. 6.✍️ How does a CSS comment start? (a) <!-- (b) # (c) // (d) /*
7. 7.Which of these is padding? (a) the gap to other boxes (b) a solid or dotted edge (c) space outside the border (d) space inside the border
8. 8.💪 Which flexbox property turns on flexbox? (a) gap (b) display: flex (c) align-items (d) justify-content
9. 9.⚖️ What colour is the text of this element?
   <p class="star" id="main">Hi</p>
   CSS:
   .star { color: purple; }
   .star { color: orange; } (a) black (b) green (c) orange (d) purple
10. 10.⚖️ What colour is the text of this element?
    <h1 class="note" id="intro">Hi</h1>
    CSS:
    #intro { color: green; }
    #intro { color: red; } (a) green (b) yellow (c) orange (d) red
11. 11.🌈 In #rrggbb, which colour do the last two digits give? (a) green (b) white (c) red (d) blue
12. 12.🧩 Which language changes the page live? (a) JavaScript (b) HTML (c) CSS
13. 13.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
14. 14.🧩 Which language counts down a timer? (a) JavaScript (b) CSS (c) HTML
15. 15.🖌️ Which CSS property colours behind the text? (a) font-weight (b) background-color (c) text-align (d) font-size
16. 16.🖌️ Where does the text sit on its line?
    li {
      background-color: orange;
      text-align: right;
      font-size: 12px;
      color: blue;
    } (a) in the middle (b) on the right (c) on the left
17. 17.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 160px;
      padding: 5px;
      border: 4px solid black;
      margin: 15px;
    }
18. 18.What does justify-content: flex-end do? (a) packs boxes at the start (b) equal gaps, none at ends (c) packs boxes at the end (d) puts boxes in the middle
19. 19.📱 What does a media query check? (a) the time of day (b) the page title (c) the screen width (d) the battery level
20. 20.🌈 In #0000ca the blue part is the hex number ca. What is it as a normal number?
21. 21.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) the first one (c) neither (d) the shorter one
22. 22.Which of these is margin? (a) a solid or dotted edge (b) the gap to other boxes (c) the text or picture (d) the gap round content
23. 23.🎯 Which element does the selector li style? (a) <div> (b) <li class="menu"> (c) <span class="menu"> (d) <p id="logo">
24. 24.📦 In the box model, which part is the line round the box? (a) margin (b) border (c) content (d) padding
25. 25.Which of these does JavaScript do? (a) adds space around boxes (b) changes the page live (c) makes a form box (d) makes headings and lists
26. 26.🖌️ Which CSS property makes letters bigger? (a) color (b) text-align (c) font-size (d) font-weight
27. 27.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) 600px or wider (c) turned off (d) exactly 1000px
28. 28.🎯 Which sign starts a class selector? (a) & (b) . (c) # (d) @
29. 29.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 20px;
      }
    } (a) Yes (b) No
30. 30.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 70px;
      padding: 30px;
      border: 5px solid black;
      margin: 0px;
    }
31. 31.🖌️ Which CSS property centres a heading? (a) background-color (b) font-weight (c) color (d) text-align
32. 32.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 60px;
      padding: 15px;
      border: 3px solid black;
      margin: 15px;
    }
33. 33.🎨 A CSS file usually ends with which extension? (a) .html (b) .png (c) .css (d) .js
34. 34.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    }
35. 35.What does color do? (a) makes letters bigger (b) sets the letter colour (c) colours behind the text (d) centres a heading
36. 36.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 150px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 60px wide (no margins).
37. 37.✍️ CSS declarations go inside which brackets? (a) < > (b) [ ] (c) { } (d) ( )
38. 38.True or false: #main is an id selector. (a) True (b) False
39. 39.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    }
40. 40.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 60px;
      padding: 25px;
      border: 2px solid black;
      margin: 15px;
    }

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