CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 320 · 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 flexbox property lines boxes up across? (a) display: flex (b) gap (c) flex-direction (d) align-items
2. 2.🧩 Which language makes a link? (a) JavaScript (b) CSS (c) HTML
3. 3.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 70px;
     padding: 5px;
     border: 5px solid black;
     margin: 0px;
   }
4. 4.🌈 Which colour of light is strongest in rgb(203, 94, 13)? (a) red (b) blue (c) green
5. 5.🖌️ Which CSS property centres a heading? (a) font-size (b) text-align (c) font-weight (d) font-family
6. 6.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 210px;
     padding: 30px;
     border: 1px solid black;
     margin: 10px;
   }
7. 7.True or false: the border is a solid or dotted edge. (a) False (b) True
8. 8.Which of these does HTML do? (a) changes the text size (b) counts down a timer (c) adds space around boxes (d) gives the page structure
9. 9.🎯 Which sign starts an id selector? (a) # (b) . (c) @ (d) &
10. 10.🔍 Which is the odd one out? (a) checks a quiz answer (b) adds space around boxes (c) reacts to a button click (d) counts down a timer
11. 11.What does background-color do? (a) makes letters bigger (b) colours behind the text (c) makes the text bold (d) picks the font style
12. 12.🌈 Which colour of light is strongest in rgb(150, 20, 7)? (a) blue (b) red (c) green
13. 13.🔍 Which is the odd one out? (a) puts a picture on a page (b) lays out the page (c) sets colours and fonts (d) adds space around boxes
14. 14.🖌️ What colour are the letters?
    h1 {
      text-align: right;
      background-color: orange;
      font-size: 32px;
      color: white;
    } (a) white (b) green (c) orange
15. 15.True or false: margin is space inside the border. (a) True (b) False
16. 16.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the shorter one (c) the first one (d) the later one
17. 17.🖌️ Where does the text sit on its line?
    li {
      background-color: orange;
      font-size: 40px;
      color: black;
      text-align: center;
    } (a) on the right (b) on the left (c) in the middle
18. 18.🖌️ What colour is behind the letters?
    h2 {
      background-color: red;
      text-align: right;
      font-size: 20px;
      color: blue;
    } (a) blue (b) black (c) red
19. 19.🖌️ How big is the text, in px?
    h1 {
      background-color: red;
      text-align: left;
      color: yellow;
      font-size: 32px;
    }
20. 20.🎨 What does CSS stand for? (a) Computer Style Sheets (b) Cascading Style Sheets (c) Creative Sheet System (d) Colourful Site Styles
21. 21.🎯 Which CSS selector matches this element?
    <p class="star" id="logo">Hello</p> (a) .menu (b) #star (c) #logo (d) h1
22. 22.✍️ What is the selector in this CSS rule?
    h2 {
      background-color: yellow;
      text-align: center;
      font-weight: bold;
    } (a) h1 (b) h2 (c) background-color (d) center
23. 23.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 90px;
      padding: 10px;
      border: 2px solid black;
      margin: 10px;
    }
24. 24.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 8px;
      }
    }
25. 25.🌈 Which colour of light is strongest in rgb(232, 18, 87)? (a) green (b) blue (c) red
26. 26.🌈 In #790000 the red part is the hex number 79. What is it as a normal number?
27. 27.⚖️ What colour is the text of this element?
    <h1 class="red" id="top">Hi</h1>
    CSS:
    h1 { color: blue; }
    #top { color: orange; } (a) blue (b) orange (c) yellow (d) black
28. 28.🎯 Can many elements share the same class? (a) No (b) Yes
29. 29.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 110px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 50px wide (no margins).
30. 30.📱 What does a media query check? (a) the page title (b) the battery level (c) the time of day (d) the screen width
31. 31.💪 Which flexbox property picks row or column? (a) flex-direction (b) display: flex (c) justify-content (d) gap
32. 32.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 4 (b) 3 (c) 6 (d) 2
33. 33.🖌️ How big is the text, in px?
    li {
      background-color: red;
      font-size: 16px;
      color: blue;
      text-align: left;
    }
34. 34.🌈 Which colour of light is strongest in rgb(24, 140, 200)? (a) blue (b) green (c) red
35. 35.✍️ What value is given to font-weight in this rule?
    .box {
      font-weight: bold;
      background-color: yellow;
    } (a) bold (b) 2px solid (c) font-weight (d) 300px
36. 36.🎯 Which element does the selector #top style? (a) <h1 class="star"> (b) <p class="top"> (c) <p id="top"> (d) <p id="intro">
37. 37.🌈 In #00007d the blue part is the hex number 7d. What is it as a normal number?
38. 38.🎯 What kind of selector is .big? (a) an element selector (b) an id selector (c) a class selector
39. 39.Which of these is padding? (a) the text or picture (b) the gap to other boxes (c) the gap round content (d) the line round the box
40. 40.✍️ Which property is set to yellow in this rule?
    h1 {
      background-color: yellow;
      text-align: center;
      padding: 8px;
    } (a) padding (b) yellow (c) margin (d) background-color

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