CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 357 · 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 sign ends each CSS declaration? (a) : (b) . (c) , (d) ;
2. 2.True or false: HTML changes the page live. (a) True (b) False
3. 3.🌈 In #0000f4 the blue part is the hex number f4. What is it as a normal number?
4. 4.📱 max-width: 600px applies when the screen is ___. (a) turned off (b) 600px or wider (c) 600px or narrower (d) exactly 1000px
5. 5.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 330px;
     justify-content: space-between;
   }
   Inside are 4 boxes, each 60px wide (no margins).
6. 6.True or false: body is an id selector. (a) False (b) True
7. 7.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
8. 8.What does justify-content: flex-end do? (a) puts boxes in the middle (b) packs boxes at the end (c) equal gaps, none at ends (d) packs boxes at the start
9. 9.🌈 Which hex code is blue? (a) #ff0000 (b) #ffff00 (c) #0000ff (d) #ff00ff
10. 10.🎯 Which sign starts an id selector? (a) & (b) @ (c) . (d) #
11. 11.🧩 Which language makes a link? (a) CSS (b) HTML (c) JavaScript
12. 12.🖌️ Which CSS property colours behind the text? (a) font-family (b) text-align (c) color (d) background-color
13. 13.✍️ CSS declarations go inside which brackets? (a) [ ] (b) { } (c) < > (d) ( )
14. 14.📦 In the box model, which part is a solid or dotted edge? (a) content (b) margin (c) padding (d) border
15. 15.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 16px;
      }
    }
16. 16.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 140px;
      padding: 25px;
      border: 3px solid black;
      margin: 10px;
    }
17. 17.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the title tag (c) the viewport meta tag (d) the br tag
18. 18.Which of these does HTML do? (a) makes headings and lists (b) sets colours and fonts (c) lays out the page (d) counts down a timer
19. 19.🌈 What is the biggest number one colour can have in rgb()? (a) 99 (b) 1000 (c) 100 (d) 255
20. 20.🎯 What kind of selector is #main? (a) an element selector (b) a class selector (c) an id selector
21. 21.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 30px;
      }
    } (a) Yes (b) No
22. 22.🌈 Which hex code is bright green? (a) #ffff00 (b) #00ff00 (c) #ff0000 (d) #ff00ff
23. 23.✍️ Which property is set to 2px solid in this rule?
    h1 {
      background-color: yellow;
      font-weight: bold;
      text-align: center;
      border: 2px solid;
    } (a) 2px solid (b) border (c) font-style (d) width
24. 24.🖌️ Which CSS property picks the font style? (a) font-family (b) font-size (c) background-color (d) color
25. 25.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 120px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 40px wide (no margins).
26. 26.✍️ What is the selector in this CSS rule?
    h1 {
      font-weight: bold;
      border: 2px solid;
      background-color: yellow;
      color: red;
    } (a) font-weight (b) p (c) h1 (d) 2px solid
27. 27.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 130px;
      padding: 15px;
      border: 5px solid black;
      margin: 15px;
    }
28. 28.🎯 What kind of selector is .star? (a) an element selector (b) an id selector (c) a class selector
29. 29.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      border: 2px solid;
    }
30. 30.True or false: padding is the gap to other boxes. (a) True (b) False
31. 31.🖌️ Where does the text sit on its line?
    h2 {
      color: yellow;
      font-size: 20px;
      text-align: right;
      background-color: purple;
    } (a) on the left (b) on the right (c) in the middle
32. 32.🌈 In #rrggbb, which colour do the last two digits give? (a) blue (b) red (c) white (d) green
33. 33.🎯 Can many elements share the same class? (a) No (b) Yes
34. 34.🖌️ What colour are the letters?
    li {
      background-color: red;
      font-size: 20px;
      text-align: right;
      color: purple;
    } (a) yellow (b) purple (c) red
35. 35.💪 Which flexbox property spaces boxes along a row? (a) flex-direction (b) justify-content (c) gap (d) display: flex
36. 36.What does font-family do? (a) makes letters bigger (b) colours behind the text (c) sets the letter colour (d) picks the font style
37. 37.✍️ What is the selector in this CSS rule?
    #top {
      margin: 10px;
      font-size: 20px;
      background-color: yellow;
    } (a) 20px (b) margin (c) #top (d) li
38. 38.✍️ What is the selector in this CSS rule?
    h2 {
      border: 2px solid;
      font-style: italic;
      font-size: 20px;
      color: red;
    } (a) italic (b) border (c) h2 (d) h1
39. 39.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 80px;
      padding: 25px;
      border: 2px solid black;
      margin: 20px;
    }
40. 40.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 180px;
      padding: 5px;
      border: 3px solid black;
      margin: 10px;
    }

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