CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 340 · 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.✍️ How many declarations (property: value pairs) are in this rule?
   #top {
     font-style: italic;
     font-size: 20px;
     border: 2px solid;
   }
2. 2.✍️ What is the selector in this CSS rule?
   #top {
     color: red;
     padding: 8px;
   } (a) #top (b) 8px (c) li (d) color
3. 3.🎯 Which CSS selector matches this element?
   <h2 class="big" id="hero">Hello</h2> (a) li (b) .hero (c) h2 (d) #big
4. 4.True or false: padding is space outside the border. (a) False (b) True
5. 5.🖌️ How big is the text, in px?
   h2 {
     background-color: purple;
     font-size: 32px;
     text-align: left;
     color: orange;
   }
6. 6.✍️ What is the selector in this CSS rule?
   .note {
     margin: 10px;
     font-size: 20px;
     border: 2px solid;
   } (a) 20px (b) .note (c) margin (d) #top
7. 7.Which of these does CSS do? (a) rounds box corners (b) makes a form box (c) gives the page structure (d) makes headings and lists
8. 8.✍️ In color: blue; which part is the value? (a) color (b) ; (c) blue (d) :
9. 9.🖌️ How big is the text, in px?
   p {
     color: purple;
     background-color: blue;
     text-align: right;
     font-size: 36px;
   }
10. 10.🌈 In #rrggbb, which colour do the last two digits give? (a) blue (b) red (c) green (d) white
11. 11.🌈 Which colour of light is strongest in rgb(52, 51, 169)? (a) blue (b) red (c) green
12. 12.🎯 Which element does the selector .box style? (a) <div class="menu"> (b) <li class="star"> (c) <li id="box"> (d) <li class="box">
13. 13.🌈 Which colour is rgb(0, 255, 0)? (a) white (b) black (c) cyan (d) bright green
14. 14.True or false: #logo is an id selector. (a) True (b) False
15. 15.What does justify-content: flex-start do? (a) packs boxes at the end (b) packs boxes at the start (c) equal gaps, none at ends (d) puts boxes in the middle
16. 16.📱 Responsive design means a page ___. (a) has no pictures (b) never changes (c) fits every screen (d) is only for laptops
17. 17.✍️ Which property is set to italic in this rule?
    h1 {
      font-style: italic;
      width: 300px;
    } (a) color (b) font-style (c) italic (d) font-size
18. 18.🖌️ Which CSS property picks the font style? (a) color (b) font-size (c) text-align (d) font-family
19. 19.🧩 Which language puts a picture on a page? (a) HTML (b) JavaScript (c) CSS
20. 20.✍️ Which property is set to 300px in this rule?
    .box {
      width: 300px;
      font-size: 20px;
      text-align: center;
    } (a) 300px (b) color (c) width (d) font-style
21. 21.⚖️ What colour is the text of this element?
    <h1 class="star" id="end">Hi</h1>
    CSS:
    #end { color: white; }
    #end { color: blue; } (a) blue (b) green (c) red (d) white
22. 22.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 160px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 50px wide (no margins).
23. 23.💪 Which flexbox property sets space between boxes? (a) justify-content (b) align-items (c) display: flex (d) gap
24. 24.What does font-size do? (a) centres a heading (b) makes letters bigger (c) picks the font style (d) makes the text bold
25. 25.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 16px;
      }
    } (a) Yes (b) No
26. 26.What does color do? (a) picks the font style (b) sets the letter colour (c) makes letters bigger (d) makes the text bold
27. 27.True or false: JavaScript makes headings and lists. (a) True (b) False
28. 28.🖌️ Where does the text sit on its line?
    li {
      color: yellow;
      font-size: 32px;
      text-align: left;
      background-color: white;
    } (a) on the right (b) in the middle (c) on the left
29. 29.True or false: CSS lays out the page. (a) True (b) False
30. 30.🔍 Which is the odd one out? (a) lays out the page (b) gives the page structure (c) makes a link (d) makes headings and lists
31. 31.True or false: margin is space inside the border. (a) False (b) True
32. 32.📱 What does a media query check? (a) the page title (b) the battery level (c) the time of day (d) the screen width
33. 33.📦 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: 25px;
      border: 2px solid black;
      margin: 5px;
    }
34. 34.✍️ CSS declarations go inside which brackets? (a) < > (b) [ ] (c) ( ) (d) { }
35. 35.🎯 What kind of selector is .menu? (a) an id selector (b) an element selector (c) a class selector
36. 36.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 110px;
      padding: 10px;
      border: 4px solid black;
      margin: 15px;
    }
37. 37.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 200px;
      padding: 25px;
      border: 1px solid black;
      margin: 5px;
    }
38. 38.🎯 Which element does the selector .box style? (a) <p class="menu"> (b) <span id="box"> (c) <span class="star"> (d) <span class="box">
39. 39.🌈 Which colour is rgb(255, 0, 255)? (a) black (b) blue (c) magenta (d) white
40. 40.True or false: the content is the gap round content. (a) False (b) True

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