CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 139 · 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.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 4 (b) 3 (c) 2 (d) 6
2. 2.🌈 Which hex code is magenta? (a) #00ff00 (b) #ff00ff (c) #0000ff (d) #ffff00
3. 3.🎯 Which CSS selector matches this element?
   <span class="box" id="hero">Hello</span> (a) .star (b) #top (c) span (d) #box
4. 4.📱 The screen is 1100px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 14px;
     }
   } (a) No (b) Yes
5. 5.What does font-size do? (a) makes the text bold (b) colours behind the text (c) makes letters bigger (d) centres a heading
6. 6.🌈 Which colour is rgb(0, 0, 255)? (a) black (b) cyan (c) white (d) blue
7. 7.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) blue (c) white (d) green
8. 8.🧩 Which language puts a picture on a page? (a) HTML (b) JavaScript (c) CSS
9. 9.🎯 Which element does the selector #main style? (a) <div id="main"> (b) <div id="logo"> (c) <div class="main"> (d) <span class="menu">
10. 10.⚖️ What colour is the text of this element?
    <h1 class="menu" id="top">Hi</h1>
    CSS:
    h1 { color: white; }
    .menu { color: orange; } (a) black (b) purple (c) orange (d) white
11. 11.🎯 Can many elements share the same class? (a) No (b) Yes
12. 12.✍️ What value is given to font-weight in this rule?
    h2 {
      font-weight: bold;
      text-align: center;
      background-color: yellow;
      width: 300px;
    } (a) 300px (b) bold (c) 2px solid (d) font-weight
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: 290px;
      padding: 10px;
      border: 1px solid black;
      margin: 15px;
    }
14. 14.🧩 Which language shows a pop-up message? (a) HTML (b) CSS (c) JavaScript
15. 15.🖌️ How big is the text, in px?
    p {
      color: blue;
      font-size: 40px;
      text-align: right;
      background-color: orange;
    }
16. 16.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
17. 17.🖌️ Which CSS property sets the letter colour? (a) background-color (b) color (c) font-size (d) text-align
18. 18.💪 Which flexbox property turns on flexbox? (a) align-items (b) display: flex (c) gap (d) flex-direction
19. 19.True or false: #hero is an id selector. (a) False (b) True
20. 20.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 22px;
      }
    }
21. 21.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 260px;
      padding: 20px;
      border: 4px solid black;
      margin: 5px;
    }
22. 22.⚖️ What colour is the text of this element?
    <p class="red" id="hero">Hi</p>
    CSS:
    p { color: orange; }
    .red { color: purple; }
    #hero { color: red; } (a) orange (b) purple (c) black (d) red
23. 23.True or false: JavaScript shows a pop-up message. (a) False (b) True
24. 24.✍️ Which property is set to center in this rule?
    #top {
      text-align: center;
      border: 2px solid;
    } (a) text-align (b) margin (c) center (d) background-color
25. 25.🧩 Which language rounds box corners? (a) HTML (b) CSS (c) JavaScript
26. 26.💪 Which flexbox property sets space between boxes? (a) gap (b) justify-content (c) flex-direction (d) display: flex
27. 27.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 24px;
      }
    } (a) No (b) Yes
28. 28.🌈 Which colour is rgb(0, 255, 255)? (a) cyan (b) red (c) white (d) blue
29. 29.🌈 In #0000ad the blue part is the hex number ad. What is it as a normal number?
30. 30.Which of these does CSS do? (a) makes a form box (b) changes the text size (c) reacts to a button click (d) makes headings and lists
31. 31.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) packs boxes at the end (c) puts boxes in the middle (d) packs boxes at the start
32. 32.⚖️ What colour is the text of this element?
    <p class="big" id="main">Hi</p>
    CSS:
    .big { color: black; }
    .big { color: purple; } (a) yellow (b) black (c) green (d) purple
33. 33.✍️ What value is given to text-align in this rule?
    h1 {
      text-align: center;
      font-size: 20px;
    } (a) yellow (b) center (c) 10px (d) text-align
34. 34.✍️ What is the selector in this CSS rule?
    h2 {
      font-style: italic;
      width: 300px;
      text-align: center;
    } (a) font-style (b) 300px (c) h1 (d) h2
35. 35.Which of these is the content? (a) the line round the box (b) the text or picture (c) space inside the border (d) the gap round content
36. 36.✍️ What value is given to font-weight in this rule?
    h2 {
      margin: 10px;
      font-weight: bold;
    } (a) 300px (b) bold (c) 2px solid (d) font-weight
37. 37.🖌️ Which CSS property makes letters bigger? (a) font-weight (b) font-size (c) font-family (d) background-color
38. 38.✍️ Which sign goes between a property and its value? (a) = (b) - (c) : (d) ;
39. 39.⚖️ What colour is the text of this element?
    <h2 class="big" id="intro">Hi</h2>
    CSS:
    h2 { color: white; }
    .big { color: orange; }
    #intro { color: green; } (a) green (b) orange (c) yellow (d) white
40. 40.⚖️ What colour is the text of this element?
    <p class="box" id="hero">Hi</p>
    CSS:
    #hero { color: red; }
    .box { color: green; } (a) green (b) red (c) black (d) purple

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