CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 327 · 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.📱 Responsive design means a page ___. (a) never changes (b) has no pictures (c) is only for laptops (d) fits every screen
2. 2.🌈 Which colour of light is strongest in rgb(117, 43, 227)? (a) green (b) red (c) blue
3. 3.🖌️ What colour are the letters?
   li {
     color: red;
     font-size: 40px;
     background-color: purple;
     text-align: right;
   } (a) orange (b) red (c) purple
4. 4.🖌️ What colour is behind the letters?
   h1 {
     text-align: center;
     font-size: 28px;
     color: purple;
     background-color: green;
   } (a) green (b) purple (c) yellow
5. 5.🌈 Which colour is #ffff00? (a) magenta (b) yellow (c) blue (d) red
6. 6.⚖️ What colour is the text of this element?
   <h1 class="star" id="intro">Hi</h1>
   CSS:
   h1 { color: white; }
   .star { color: black; }
   #intro { color: red; } (a) white (b) green (c) black (d) red
7. 7.⚖️ What colour is the text of this element?
   <h1 class="menu" id="intro">Hi</h1>
   CSS:
   .menu { color: red; }
   h1 { color: yellow; } (a) purple (b) red (c) yellow (d) blue
8. 8.💪 Which flexbox property sets space between boxes? (a) justify-content (b) gap (c) display: flex (d) align-items
9. 9.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 190px;
     justify-content: center;
   }
   Inside are 3 boxes, each 50px wide (no margins).
10. 10.🌈 In #rrggbb, which colour do the first two digits give? (a) black (b) red (c) green (d) blue
11. 11.🖌️ What colour are the letters?
    h1 {
      background-color: white;
      font-size: 20px;
      text-align: center;
      color: yellow;
    } (a) purple (b) white (c) yellow
12. 12.🌈 Which hex code is black? (a) #ff0000 (b) #ffff00 (c) #000000 (d) #00ffff
13. 13.🖌️ Which CSS property sets the letter colour? (a) font-size (b) text-align (c) font-family (d) color
14. 14.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 14px;
      }
    } (a) No (b) Yes
15. 15.What does text-align do? (a) sets the letter colour (b) makes the text bold (c) colours behind the text (d) centres a heading
16. 16.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
17. 17.🌈 Which hex code is cyan? (a) #0000ff (b) #00ffff (c) #ff00ff (d) #ffffff
18. 18.🖌️ How big is the text, in px?
    h1 {
      text-align: left;
      background-color: black;
      color: white;
      font-size: 24px;
    }
19. 19.⚖️ What colour is the text of this element?
    <p class="red" id="top">Hi</p>
    CSS:
    p { color: white; }
    p { color: blue; } (a) red (b) purple (c) white (d) blue
20. 20.What does color do? (a) colours behind the text (b) makes the text bold (c) picks the font style (d) sets the letter colour
21. 21.🧩 Which language shows a pop-up message? (a) JavaScript (b) HTML (c) CSS
22. 22.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 26px;
      }
    } (a) No (b) Yes
23. 23.🎯 Which element does the selector span style? (a) <h1 class="big"> (b) <h2 id="logo"> (c) <span class="big"> (d) <p>
24. 24.🌈 In #0000b8 the blue part is the hex number b8. What is it as a normal number?
25. 25.⚖️ What colour is the text of this element?
    <h1 class="menu" id="intro">Hi</h1>
    CSS:
    h1 { color: white; }
    #intro { color: yellow; } (a) blue (b) red (c) white (d) yellow
26. 26.🖌️ Which CSS property makes the text bold? (a) background-color (b) font-weight (c) font-size (d) text-align
27. 27.⚖️ What colour is the text of this element?
    <p class="red" id="end">Hi</p>
    CSS:
    #end { color: red; }
    .red { color: blue; } (a) red (b) blue (c) yellow (d) black
28. 28.True or false: padding is the gap round content. (a) True (b) False
29. 29.✍️ What value is given to border in this rule?
    p {
      color: red;
      border: 2px solid;
    } (a) 300px (b) 2px solid (c) italic (d) border
30. 30.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
31. 31.🌈 Which hex code is bright green? (a) #ff00ff (b) #ffff00 (c) #000000 (d) #00ff00
32. 32.🖌️ How big is the text, in px?
    h2 {
      background-color: green;
      font-size: 40px;
      text-align: left;
      color: red;
    }
33. 33.✍️ What value is given to font-size in this rule?
    p {
      font-size: 20px;
      background-color: yellow;
    } (a) font-size (b) center (c) 20px (d) yellow
34. 34.Which of these is padding? (a) the text or picture (b) space inside the border (c) the line round the box (d) the gap to other boxes
35. 35.✍️ What is the selector in this CSS rule?
    h2 {
      padding: 8px;
      font-style: italic;
      margin: 10px;
    } (a) h2 (b) italic (c) h1 (d) padding
36. 36.💪 Which flexbox property spaces boxes along a row? (a) justify-content (b) align-items (c) display: flex (d) flex-direction
37. 37.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    } (a) Yes (b) No
38. 38.✍️ What is the selector in this CSS rule?
    p {
      width: 300px;
      border: 2px solid;
      text-align: center;
    } (a) p (b) .note (c) 2px solid (d) width
39. 39.🌈 Which colour is #ff00ff? (a) cyan (b) magenta (c) white (d) bright green
40. 40.🎯 Which element does the selector #main style? (a) <h1 id="logo"> (b) <h1 class="main"> (c) <h2 class="box"> (d) <h1 id="main">

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