CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 696 · 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 language adds space around boxes? (a) HTML (b) JavaScript (c) CSS
2. 2.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 230px;
     justify-content: flex-start;
   }
   Inside are 2 boxes, each 100px wide (no margins).
3. 3.🎨 One CSS file can style how many pages? (a) only one word (b) no pages (c) many pages (d) only one image
4. 4.✍️ Which property is set to yellow in this rule?
   li {
     font-size: 20px;
     background-color: yellow;
     margin: 10px;
   } (a) yellow (b) margin (c) padding (d) background-color
5. 5.🎨 Which tag connects an outside CSS file? (a) <a> (b) <css> (c) <img> (d) <link>
6. 6.⚖️ What colour is the text of this element?
   <h2 class="star" id="intro">Hi</h2>
   CSS:
   .star { color: black; }
   #intro { color: white; }
   h2 { color: orange; } (a) purple (b) orange (c) black (d) white
7. 7.⚖️ What colour is the text of this element?
   <p class="big" id="end">Hi</p>
   CSS:
   #end { color: green; }
   p { color: yellow; }
   .big { color: red; } (a) white (b) yellow (c) red (d) green
8. 8.Which of these is the content? (a) the line round the box (b) space outside the border (c) space inside the border (d) the text or picture
9. 9.🖌️ What colour are the letters?
   p {
     font-size: 16px;
     text-align: right;
     background-color: purple;
     color: orange;
   } (a) orange (b) purple (c) green
10. 10.🖌️ Where does the text sit on its line?
    p {
      text-align: left;
      font-size: 28px;
      color: red;
      background-color: white;
    } (a) on the left (b) on the right (c) in the middle
11. 11.⚖️ Which selector is the weakest? (a) a class selector (b) an element selector (c) an id selector
12. 12.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 20px;
      }
    }
13. 13.🎯 Can many elements share the same class? (a) No (b) Yes
14. 14.🌈 Which colour is #0000ff? (a) bright green (b) blue (c) cyan (d) yellow
15. 15.🌈 Which hex code is blue? (a) #ffff00 (b) #00ffff (c) #0000ff (d) #000000
16. 16.⚖️ What colour is the text of this element?
    <p class="note" id="logo">Hi</p>
    CSS:
    .note { color: blue; }
    .note { color: orange; } (a) black (b) green (c) blue (d) orange
17. 17.🎯 What kind of selector is h1? (a) a class selector (b) an id selector (c) an element selector
18. 18.⚖️ What colour is the text of this element?
    <h1 class="big" id="intro">Hi</h1>
    CSS:
    .big { color: white; }
    h1 { color: green; }
    #intro { color: orange; } (a) green (b) orange (c) yellow (d) white
19. 19.What does justify-content: flex-end do? (a) equal gaps, none at ends (b) packs boxes at the end (c) packs boxes at the start (d) puts boxes in the middle
20. 20.✍️ Which property is set to 2px solid in this rule?
    .box {
      background-color: yellow;
      font-weight: bold;
      border: 2px solid;
    } (a) 2px solid (b) border (c) font-style (d) width
21. 21.True or false: p is an element selector. (a) False (b) True
22. 22.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 16px;
      }
    }
23. 23.📱 Responsive design means a page ___. (a) has no pictures (b) never changes (c) is only for laptops (d) fits every screen
24. 24.🎯 Which element does the selector .menu style? (a) <p class="big"> (b) <span id="menu"> (c) <span class="menu"> (d) <span class="note">
25. 25.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      padding: 8px;
      font-style: italic;
      background-color: yellow;
      margin: 10px;
    }
26. 26.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      text-align: center;
    }
27. 27.🌈 Which colour is rgb(0, 0, 0)? (a) black (b) cyan (c) red (d) yellow
28. 28.What does font-weight do? (a) makes the text bold (b) sets the letter colour (c) makes letters bigger (d) colours behind the text
29. 29.⚖️ What colour is the text of this element?
    <h2 class="menu" id="logo">Hi</h2>
    CSS:
    .menu { color: black; }
    #logo { color: yellow; }
    h2 { color: red; } (a) black (b) blue (c) red (d) yellow
30. 30.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 180px;
      padding: 20px;
      border: 2px solid black;
      margin: 5px;
    }
31. 31.✍️ In color: blue; which part is the value? (a) blue (b) ; (c) color (d) :
32. 32.🌈 Hex digits go 0 to 9, then A to which letter? (a) G (b) F (c) J (d) Z
33. 33.🖌️ Which CSS property sets the letter colour? (a) text-align (b) color (c) font-size (d) background-color
34. 34.🧩 Which language rounds box corners? (a) CSS (b) JavaScript (c) HTML
35. 35.🌈 Which colour is #ff0000? (a) yellow (b) cyan (c) bright green (d) red
36. 36.🎯 Which element does the selector #intro style? (a) <span class="menu"> (b) <div class="intro"> (c) <div id="main"> (d) <div id="intro">
37. 37.🌈 Which colour is #00ff00? (a) magenta (b) black (c) bright green (d) blue
38. 38.✍️ What value is given to padding in this rule?
    h2 {
      font-weight: bold;
      padding: 8px;
    } (a) padding (b) bold (c) 8px (d) 2px solid
39. 39.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    }
40. 40.Which of these does JavaScript do? (a) gives the page structure (b) shows a pop-up message (c) lays out the page (d) makes headings and lists

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