CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 763 · 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.🎯 What kind of selector is #hero? (a) an element selector (b) a class selector (c) an id selector
2. 2.🌈 Which hex code is bright green? (a) #00ffff (b) #0000ff (c) #00ff00 (d) #ffffff
3. 3.🧩 Which language changes the page live? (a) CSS (b) HTML (c) JavaScript
4. 4.⚖️ What colour is the text of this element?
   <h1 class="star" id="hero">Hi</h1>
   CSS:
   .star { color: yellow; }
   #hero { color: red; }
   h1 { color: purple; } (a) red (b) yellow (c) purple (d) white
5. 5.✍️ Which sign goes between a property and its value? (a) = (b) ; (c) - (d) :
6. 6.Which of these does JavaScript do? (a) checks a quiz answer (b) makes a form box (c) makes headings and lists (d) sets colours and fonts
7. 7.⚖️ What colour is the text of this element?
   <p class="red" id="logo">Hi</p>
   CSS:
   .red { color: black; }
   p { color: red; } (a) red (b) green (c) black (d) white
8. 8.🌈 Which colour of light is strongest in rgb(64, 66, 224)? (a) red (b) green (c) blue
9. 9.💪 Which flexbox property sets space between boxes? (a) justify-content (b) gap (c) align-items (d) flex-direction
10. 10.Which of these is the content? (a) the text or picture (b) a solid or dotted edge (c) the line round the box (d) space inside the border
11. 11.🌈 Which colour is #0000ff? (a) magenta (b) black (c) white (d) blue
12. 12.⚖️ What colour is the text of this element?
    <p class="red" id="intro">Hi</p>
    CSS:
    #intro { color: orange; }
    #intro { color: green; } (a) black (b) white (c) green (d) orange
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: 50px;
      padding: 30px;
      border: 1px solid black;
      margin: 5px;
    }
14. 14.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) 800px or wider (c) exactly 100px (d) turned off
15. 15.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 180px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 60px wide (no margins).
16. 16.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 120px;
      padding: 20px;
      border: 1px solid black;
      margin: 10px;
    }
17. 17.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    }
18. 18.🌈 Which hex code is magenta? (a) #ff00ff (b) #ffff00 (c) #ff0000 (d) #00ff00
19. 19.⚖️ What colour is the text of this element?
    <p class="star" id="intro">Hi</p>
    CSS:
    #intro { color: orange; }
    #intro { color: purple; } (a) white (b) orange (c) yellow (d) purple
20. 20.Which of these does HTML do? (a) makes a link (b) sets colours and fonts (c) checks a quiz answer (d) counts down a timer
21. 21.🌈 Which colour of light is strongest in rgb(236, 47, 52)? (a) blue (b) green (c) red
22. 22.⚖️ What colour is the text of this element?
    <p class="box" id="main">Hi</p>
    CSS:
    #main { color: purple; }
    .box { color: orange; } (a) yellow (b) orange (c) black (d) purple
23. 23.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 80px;
      padding: 30px;
      border: 3px solid black;
      margin: 0px;
    }
24. 24.🖌️ What colour are the letters?
    li {
      text-align: center;
      font-size: 28px;
      color: green;
      background-color: yellow;
    } (a) purple (b) green (c) yellow
25. 25.🎨 Which tag holds CSS inside the head? (a) <body> (b) <script> (c) <css> (d) <style>
26. 26.What does text-align do? (a) centres a heading (b) colours behind the text (c) sets the letter colour (d) picks the font style
27. 27.What does color do? (a) colours behind the text (b) makes letters bigger (c) makes the text bold (d) sets the letter colour
28. 28.✍️ In color: blue; which part is the value? (a) color (b) : (c) blue (d) ;
29. 29.💪 Which flexbox property turns on flexbox? (a) flex-direction (b) display: flex (c) align-items (d) justify-content
30. 30.🖌️ How big is the text, in px?
    li {
      font-size: 20px;
      color: blue;
      text-align: right;
      background-color: red;
    }
31. 31.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 150px;
      padding: 20px;
      border: 2px solid black;
      margin: 5px;
    }
32. 32.🎯 Can many elements share the same class? (a) Yes (b) No
33. 33.⚖️ What colour is the text of this element?
    <h1 class="menu" id="top">Hi</h1>
    CSS:
    #top { color: purple; }
    .menu { color: yellow; }
    h1 { color: black; } (a) black (b) orange (c) purple (d) yellow
34. 34.🎯 Which sign starts an id selector? (a) . (b) @ (c) & (d) #
35. 35.⚖️ What colour is the text of this element?
    <p class="big" id="main">Hi</p>
    CSS:
    #main { color: red; }
    .big { color: yellow; } (a) yellow (b) black (c) white (d) red
36. 36.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 16px;
      }
    }
37. 37.🌈 In #00ff00 the green part is the hex number ff. What is it as a normal number?
38. 38.🌈 In #004500 the green part is the hex number 45. What is it as a normal number?
39. 39.True or false: JavaScript counts down a timer. (a) True (b) False
40. 40.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 14px;
      }
    } (a) No (b) Yes

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