CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 438 · 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.⚖️ What colour is the text of this element?
   <h2 class="big" id="hero">Hi</h2>
   CSS:
   #hero { color: red; }
   #hero { color: white; } (a) black (b) purple (c) red (d) white
2. 2.True or false: p is an element selector. (a) False (b) True
3. 3.True or false: #logo is an id selector. (a) True (b) False
4. 4.⚖️ What colour is the text of this element?
   <h2 class="star" id="hero">Hi</h2>
   CSS:
   #hero { color: blue; }
   #hero { color: green; } (a) white (b) green (c) yellow (d) blue
5. 5.⚖️ What colour is the text of this element?
   <p class="star" id="end">Hi</p>
   CSS:
   .star { color: purple; }
   #end { color: black; } (a) purple (b) black (c) white (d) orange
6. 6.🎯 Which element does the selector .big style? (a) <div class="box"> (b) <li class="red"> (c) <li id="big"> (d) <li class="big">
7. 7.⚖️ What colour is the text of this element?
   <h2 class="menu" id="intro">Hi</h2>
   CSS:
   #intro { color: purple; }
   h2 { color: red; }
   .menu { color: black; } (a) purple (b) black (c) red (d) yellow
8. 8.🖌️ Which CSS property centres a heading? (a) font-size (b) font-family (c) text-align (d) color
9. 9.🌈 Which colour is #00ff00? (a) bright green (b) white (c) blue (d) cyan
10. 10.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 140px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 60px wide (no margins).
11. 11.⚖️ What colour is the text of this element?
    <h2 class="note" id="hero">Hi</h2>
    CSS:
    .note { color: green; }
    #hero { color: purple; }
    h2 { color: black; } (a) black (b) green (c) white (d) purple
12. 12.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 260px;
      justify-content: center;
    }
    Inside are 2 boxes, each 60px wide (no margins).
13. 13.Which of these does HTML do? (a) makes headings and lists (b) sets colours and fonts (c) lays out the page (d) rounds box corners
14. 14.🎯 Which sign starts a class selector? (a) @ (b) & (c) # (d) .
15. 15.🖌️ Which CSS property sets the letter colour? (a) color (b) text-align (c) background-color (d) font-family
16. 16.🖌️ Which CSS property picks the font style? (a) background-color (b) font-weight (c) font-family (d) font-size
17. 17.🌈 Which hex code is black? (a) #000000 (b) #ff00ff (c) #ff0000 (d) #ffffff
18. 18.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
19. 19.🎯 What kind of selector is .card? (a) an element selector (b) an id selector (c) a class selector
20. 20.📱 What does a media query check? (a) the battery level (b) the screen width (c) the page title (d) the time of day
21. 21.🎨 A CSS file usually ends with which extension? (a) .png (b) .js (c) .css (d) .html
22. 22.🧩 Which language gives the page structure? (a) CSS (b) JavaScript (c) HTML
23. 23.🔍 Which is the odd one out? (a) makes a form box (b) gives the page structure (c) counts down a timer (d) puts a picture on a page
24. 24.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 240px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 60px wide (no margins).
25. 25.✍️ In color: blue; which part is the property? (a) : (b) color (c) blue (d) ;
26. 26.🔍 Which is the odd one out? (a) puts a picture on a page (b) makes headings and lists (c) makes a link (d) changes the text size
27. 27.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      color: red;
    }
28. 28.What does justify-content: flex-end do? (a) puts boxes in the middle (b) packs boxes at the start (c) equal gaps, none at ends (d) packs boxes at the end
29. 29.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 180px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 60px wide (no margins).
30. 30.✍️ What is the selector in this CSS rule?
    h1 {
      font-size: 20px;
      background-color: yellow;
    } (a) yellow (b) font-size (c) p (d) h1
31. 31.✍️ Which property is set to 8px in this rule?
    .box {
      color: red;
      padding: 8px;
    } (a) 8px (b) padding (c) border (d) font-weight
32. 32.⚖️ What colour is the text of this element?
    <p class="star" id="hero">Hi</p>
    CSS:
    #hero { color: green; }
    #hero { color: black; } (a) white (b) black (c) green (d) red
33. 33.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    }
34. 34.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 2 (b) 6 (c) 3 (d) 4
35. 35.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 24px;
      }
    }
36. 36.✍️ What value is given to padding in this rule?
    p {
      padding: 8px;
      width: 300px;
      color: red;
    } (a) 8px (b) padding (c) bold (d) 2px solid
37. 37.🖌️ What colour are the letters?
    h2 {
      font-size: 40px;
      color: black;
      background-color: purple;
      text-align: left;
    } (a) purple (b) blue (c) black
38. 38.✍️ CSS declarations go inside which brackets? (a) { } (b) [ ] (c) ( ) (d) < >
39. 39.✍️ In color: blue; which part is the value? (a) blue (b) : (c) color (d) ;
40. 40.⚖️ What colour is the text of this element?
    <h1 class="red" id="intro">Hi</h1>
    CSS:
    .red { color: green; }
    #intro { color: white; } (a) white (b) yellow (c) green (d) black

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