CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 370 · 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 of these does JavaScript do? (a) makes a form box (b) checks a quiz answer (c) makes a link (d) makes headings and lists
2. 2.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 180px;
     padding: 10px;
     border: 2px solid black;
     margin: 10px;
   }
3. 3.✍️ What is the selector in this CSS rule?
   body {
     width: 300px;
     font-style: italic;
   } (a) body (b) .box (c) width (d) italic
4. 4.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 80px;
     padding: 15px;
     border: 5px solid black;
     margin: 15px;
   }
5. 5.⚖️ Which selector is the strongest? (a) an element selector (b) an id selector (c) a class selector
6. 6.💪 Which flexbox property sets space between boxes? (a) align-items (b) gap (c) display: flex (d) justify-content
7. 7.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 160px;
     padding: 30px;
     border: 1px solid black;
     margin: 15px;
   }
8. 8.📦 In the box model, which part is the text or picture? (a) margin (b) padding (c) content (d) border
9. 9.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 380px;
     justify-content: flex-start;
   }
   Inside are 3 boxes, each 100px wide (no margins).
10. 10.🌈 Which colour is rgb(0, 255, 0)? (a) yellow (b) blue (c) bright green (d) magenta
11. 11.Which of these does CSS do? (a) shows a pop-up message (b) makes a form box (c) counts down a timer (d) changes the text size
12. 12.🧩 Which language changes the page live? (a) JavaScript (b) CSS (c) HTML
13. 13.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 2 (c) 4 (d) 3
14. 14.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) space-between (c) flex-end (d) center
15. 15.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 180px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 40px wide (no margins).
16. 16.✍️ In color: blue; which part is the property? (a) blue (b) ; (c) : (d) color
17. 17.Which of these is margin? (a) the text or picture (b) a solid or dotted edge (c) space outside the border (d) space inside the border
18. 18.✍️ What value is given to font-style in this rule?
    h1 {
      font-style: italic;
      text-align: center;
      border: 2px solid;
    } (a) font-style (b) red (c) italic (d) 20px
19. 19.Which of these is padding? (a) the gap to other boxes (b) the text or picture (c) a solid or dotted edge (d) space inside the border
20. 20.🎯 Which element does the selector h1 style? (a) <div id="hero"> (b) <li class="note"> (c) <h2> (d) <h1 class="note">
21. 21.What does font-size do? (a) makes the text bold (b) centres a heading (c) makes letters bigger (d) sets the letter colour
22. 22.🎯 What kind of selector is .big? (a) an element selector (b) a class selector (c) an id selector
23. 23.✍️ Which sign goes between a property and its value? (a) = (b) : (c) ; (d) -
24. 24.💪 Which justify-content value packs boxes at the end? (a) flex-end (b) flex-start (c) center (d) space-between
25. 25.What does justify-content: center do? (a) equal gaps, none at ends (b) packs boxes at the start (c) puts boxes in the middle (d) packs boxes at the end
26. 26.⚖️ What colour is the text of this element?
    <h1 class="note" id="intro">Hi</h1>
    CSS:
    .note { color: green; }
    #intro { color: blue; } (a) green (b) blue (c) purple (d) black
27. 27.🌈 Which hex code is cyan? (a) #ff0000 (b) #ffffff (c) #ffff00 (d) #00ffff
28. 28.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 140px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 40px wide (no margins).
29. 29.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 260px;
      justify-content: center;
    }
    Inside are 4 boxes, each 50px wide (no margins).
30. 30.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      text-align: center;
      margin: 10px;
      padding: 8px;
    }
31. 31.True or false: #main is an id selector. (a) False (b) True
32. 32.🖌️ What colour are the letters?
    h1 {
      color: blue;
      background-color: purple;
      font-size: 40px;
      text-align: left;
    } (a) blue (b) white (c) purple
33. 33.Which of these does CSS do? (a) gives the page structure (b) puts a picture on a page (c) makes a form box (d) sets colours and fonts
34. 34.✍️ What value is given to font-style in this rule?
    .box {
      font-style: italic;
      padding: 8px;
      text-align: center;
    } (a) 20px (b) italic (c) red (d) font-style
35. 35.🎨 A CSS file usually ends with which extension? (a) .css (b) .png (c) .js (d) .html
36. 36.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 230px;
      padding: 10px;
      border: 5px solid black;
      margin: 5px;
    }
37. 37.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) neither (c) the shorter one (d) the later one
38. 38.🖌️ How big is the text, in px?
    p {
      background-color: purple;
      font-size: 16px;
      color: orange;
      text-align: center;
    }
39. 39.✍️ What value is given to width in this rule?
    h1 {
      width: 300px;
      margin: 10px;
    } (a) width (b) red (c) italic (d) 300px
40. 40.🌈 Which colour is #00ff00? (a) magenta (b) red (c) black (d) bright green

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