CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 741 · 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 attribute adds CSS inside one tag? (a) href (b) alt (c) src (d) style
2. 2.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 160px;
     justify-content: flex-end;
   }
   Inside are 2 boxes, each 60px wide (no margins).
3. 3.⚖️ What colour is the text of this element?
   <p class="big" id="logo">Hi</p>
   CSS:
   #logo { color: blue; }
   p { color: yellow; }
   .big { color: green; } (a) yellow (b) green (c) blue (d) red
4. 4.⚖️ What colour is the text of this element?
   <p class="menu" id="intro">Hi</p>
   CSS:
   .menu { color: blue; }
   .menu { color: green; } (a) blue (b) black (c) orange (d) green
5. 5.🎯 What kind of selector is #hero? (a) an element selector (b) an id selector (c) a class selector
6. 6.What does justify-content: center do? (a) packs boxes at the end (b) puts boxes in the middle (c) packs boxes at the start (d) equal gaps, none at ends
7. 7.🎯 Which CSS selector matches this element?
   <li class="box" id="end">Hello</li> (a) #box (b) div (c) .end (d) .box
8. 8.✍️ What value is given to width in this rule?
   p {
     color: red;
     width: 300px;
   } (a) width (b) italic (c) red (d) 300px
9. 9.🎯 Which CSS selector matches this element?
   <span class="note" id="logo">Hello</span> (a) span (b) #end (c) .big (d) .logo
10. 10.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the later one (c) the first one (d) the shorter one
11. 11.⚖️ What colour is the text of this element?
    <h1 class="red" id="main">Hi</h1>
    CSS:
    .red { color: red; }
    .red { color: purple; } (a) red (b) orange (c) yellow (d) purple
12. 12.🌈 Which hex code is red? (a) #000000 (b) #ff00ff (c) #ff0000 (d) #ffffff
13. 13.True or false: p is an element selector. (a) True (b) False
14. 14.🖌️ What colour are the letters?
    p {
      background-color: yellow;
      color: white;
      font-size: 28px;
      text-align: right;
    } (a) green (b) yellow (c) white
15. 15.⚖️ What colour is the text of this element?
    <h2 class="star" id="top">Hi</h2>
    CSS:
    .star { color: green; }
    h2 { color: blue; } (a) black (b) purple (c) green (d) blue
16. 16.Which of these does CSS do? (a) gives the page structure (b) changes the page live (c) puts a picture on a page (d) adds space around boxes
17. 17.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
18. 18.True or false: #hero is an element selector. (a) False (b) True
19. 19.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 22px;
      }
    } (a) Yes (b) No
20. 20.🎯 Which element does the selector li style? (a) <div> (b) <span class="big"> (c) <p id="top"> (d) <li class="big">
21. 21.✍️ Which property is set to 300px in this rule?
    body {
      width: 300px;
      color: red;
      padding: 8px;
    } (a) color (b) 300px (c) width (d) font-style
22. 22.True or false: margin is the text or picture. (a) False (b) True
23. 23.✍️ What is the selector in this CSS rule?
    li {
      font-weight: bold;
      margin: 10px;
    } (a) 10px (b) font-weight (c) li (d) body
24. 24.📦 In the box model, which part is the gap round content? (a) border (b) margin (c) padding (d) content
25. 25.📱 min-width: 800px applies when the screen is ___. (a) exactly 100px (b) 800px or narrower (c) 800px or wider (d) turned off
26. 26.🌈 In #000048 the blue part is the hex number 48. What is it as a normal number?
27. 27.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 18px;
      }
    }
28. 28.💪 Which flexbox property picks row or column? (a) display: flex (b) justify-content (c) align-items (d) flex-direction
29. 29.⚖️ What colour is the text of this element?
    <h1 class="big" id="intro">Hi</h1>
    CSS:
    h1 { color: red; }
    h1 { color: blue; } (a) purple (b) red (c) white (d) blue
30. 30.Which of these does JavaScript do? (a) changes the text size (b) makes headings and lists (c) lays out the page (d) changes the page live
31. 31.🎯 Which sign starts a class selector? (a) . (b) @ (c) & (d) #
32. 32.🎨 A CSS file usually ends with which extension? (a) .png (b) .html (c) .css (d) .js
33. 33.🎯 Which element does the selector div style? (a) <h1 id="logo"> (b) <p class="big"> (c) <span> (d) <div class="big">
34. 34.🌈 In #000015 the blue part is the hex number 15. What is it as a normal number?
35. 35.⚖️ What colour is the text of this element?
    <h1 class="menu" id="main">Hi</h1>
    CSS:
    #main { color: yellow; }
    h1 { color: green; }
    .menu { color: purple; } (a) black (b) yellow (c) green (d) purple
36. 36.🌈 Which colour is #ffff00? (a) blue (b) yellow (c) red (d) black
37. 37.🌈 Hex digits go 0 to 9, then A to which letter? (a) J (b) G (c) Z (d) F
38. 38.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 250px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 50px wide (no margins).
39. 39.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) 600px or wider (c) turned off (d) exactly 1000px
40. 40.🖌️ Where does the text sit on its line?
    h2 {
      text-align: left;
      color: purple;
      background-color: black;
      font-size: 12px;
    } (a) in the middle (b) on the left (c) on the right

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