CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 439 · 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 colour is rgb(0, 255, 255)? (a) cyan (b) red (c) black (d) yellow
2. 2.💪 Which justify-content value packs boxes at the end? (a) center (b) flex-end (c) flex-start (d) space-between
3. 3.🌈 Hex digits go 0 to 9, then A to which letter? (a) Z (b) J (c) F (d) G
4. 4.💪 Which flexbox property lines boxes up across? (a) flex-direction (b) gap (c) justify-content (d) align-items
5. 5.🖌️ How big is the text, in px?
   h2 {
     background-color: white;
     color: black;
     font-size: 40px;
     text-align: left;
   }
6. 6.🌈 Which colour is rgb(0, 0, 0)? (a) black (b) red (c) yellow (d) bright green
7. 7.⚖️ What colour is the text of this element?
   <p class="star" id="end">Hi</p>
   CSS:
   .star { color: black; }
   .star { color: red; } (a) red (b) blue (c) purple (d) black
8. 8.🔍 Which is the odd one out? (a) gives the page structure (b) makes a link (c) makes headings and lists (d) shows a pop-up message
9. 9.⚖️ What colour is the text of this element?
   <p class="box" id="end">Hi</p>
   CSS:
   p { color: red; }
   p { color: purple; } (a) red (b) purple (c) white (d) yellow
10. 10.Which of these is the border? (a) the gap to other boxes (b) the text or picture (c) space inside the border (d) the line round the box
11. 11.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 190px;
      padding: 10px;
      border: 1px solid black;
      margin: 5px;
    }
12. 12.🔍 Which is the odd one out? (a) changes the page live (b) checks a quiz answer (c) rounds box corners (d) counts down a timer
13. 13.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 220px;
      padding: 5px;
      border: 5px solid black;
      margin: 20px;
    }
14. 14.✍️ What value is given to color in this rule?
    .box {
      font-weight: bold;
      color: red;
      font-style: italic;
      width: 300px;
    } (a) center (b) red (c) color (d) 20px
15. 15.🎯 What kind of selector is .big? (a) an element selector (b) an id selector (c) a class selector
16. 16.⚖️ What colour is the text of this element?
    <h2 class="box" id="end">Hi</h2>
    CSS:
    .box { color: yellow; }
    .box { color: blue; } (a) blue (b) green (c) yellow (d) purple
17. 17.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 130px;
      padding: 20px;
      border: 2px solid black;
      margin: 20px;
    }
18. 18.⚖️ What colour is the text of this element?
    <h2 class="red" id="end">Hi</h2>
    CSS:
    h2 { color: purple; }
    .red { color: orange; } (a) purple (b) black (c) red (d) orange
19. 19.Which of these does JavaScript do? (a) sets colours and fonts (b) checks a quiz answer (c) makes headings and lists (d) puts a picture on a page
20. 20.True or false: body is an element selector. (a) False (b) True
21. 21.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
22. 22.🎯 What kind of selector is #hero? (a) a class selector (b) an id selector (c) an element selector
23. 23.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) black (c) green (d) blue
24. 24.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    } (a) Yes (b) No
25. 25.✍️ What is the selector in this CSS rule?
    body {
      margin: 10px;
      border: 2px solid;
    } (a) .box (b) margin (c) body (d) 2px solid
26. 26.🎨 Which attribute adds CSS inside one tag? (a) src (b) style (c) alt (d) href
27. 27.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 140px;
      padding: 20px;
      border: 1px solid black;
      margin: 0px;
    }
28. 28.🧩 Which language gives the page structure? (a) HTML (b) CSS (c) JavaScript
29. 29.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 12px;
      }
    }
30. 30.💪 Which justify-content value puts boxes in the middle? (a) space-between (b) flex-end (c) center (d) flex-start
31. 31.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 120px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 40px wide (no margins).
32. 32.🌈 Which colour is rgb(255, 0, 0)? (a) black (b) bright green (c) blue (d) red
33. 33.🖌️ What colour is behind the letters?
    h1 {
      color: black;
      text-align: right;
      background-color: green;
      font-size: 16px;
    } (a) black (b) green (c) white
34. 34.⚖️ What colour is the text of this element?
    <p class="big" id="intro">Hi</p>
    CSS:
    .big { color: red; }
    .big { color: blue; } (a) red (b) black (c) blue (d) green
35. 35.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 4 (b) 2 (c) 6 (d) 3
36. 36.✍️ How does a CSS comment start? (a) # (b) /* (c) <!-- (d) //
37. 37.⚖️ What colour is the text of this element?
    <p class="big" id="intro">Hi</p>
    CSS:
    p { color: purple; }
    p { color: white; } (a) white (b) purple (c) black (d) blue
38. 38.✍️ What is the selector in this CSS rule?
    h2 {
      color: red;
      font-style: italic;
    } (a) h2 (b) color (c) h1 (d) italic
39. 39.🎯 Which element does the selector .big style? (a) <div class="red"> (b) <div id="big"> (c) <div class="big"> (d) <span class="box">
40. 40.What does text-align do? (a) picks the font style (b) makes the text bold (c) centres a heading (d) sets the letter colour

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