CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 480 · 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.🖌️ Where does the text sit on its line?
   h1 {
     background-color: red;
     text-align: center;
     color: yellow;
     font-size: 24px;
   } (a) on the left (b) in the middle (c) on the right
2. 2.True or false: #hero is an id selector. (a) False (b) True
3. 3.🎯 Which sign starts an id selector? (a) & (b) # (c) @ (d) .
4. 4.🎯 What kind of selector is h1? (a) a class selector (b) an element selector (c) an id selector
5. 5.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) center (c) space-between (d) flex-end
6. 6.🎯 Which element does the selector p style? (a) <p class="note"> (b) <h2 class="note"> (c) <h1> (d) <li id="top">
7. 7.🖌️ Which CSS property picks the font style? (a) color (b) font-family (c) font-weight (d) text-align
8. 8.🔍 Which is the odd one out? (a) counts down a timer (b) reacts to a button click (c) gives the page structure (d) changes the page live
9. 9.🎨 What does CSS stand for? (a) Cascading Style Sheets (b) Creative Sheet System (c) Colourful Site Styles (d) Computer Style Sheets
10. 10.🖌️ Which CSS property makes letters bigger? (a) font-size (b) color (c) background-color (d) font-weight
11. 11.🧩 Which language lays out the page? (a) JavaScript (b) HTML (c) CSS
12. 12.✍️ Which property is set to red in this rule?
    h2 {
      margin: 10px;
      color: red;
    } (a) text-align (b) font-size (c) red (d) color
13. 13.🖌️ What colour is behind the letters?
    li {
      background-color: orange;
      text-align: center;
      font-size: 32px;
      color: green;
    } (a) blue (b) orange (c) green
14. 14.✍️ What value is given to font-weight in this rule?
    .box {
      font-weight: bold;
      border: 2px solid;
      text-align: center;
    } (a) 300px (b) font-weight (c) 2px solid (d) bold
15. 15.⚖️ What colour is the text of this element?
    <h2 class="box" id="logo">Hi</h2>
    CSS:
    #logo { color: yellow; }
    #logo { color: white; } (a) white (b) yellow (c) orange (d) black
16. 16.True or false: p is an element selector. (a) False (b) True
17. 17.💪 Which justify-content value packs boxes at the end? (a) flex-start (b) flex-end (c) center (d) space-between
18. 18.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 160px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 40px wide (no margins).
19. 19.What does font-family do? (a) makes letters bigger (b) sets the letter colour (c) picks the font style (d) colours behind the text
20. 20.⚖️ What colour is the text of this element?
    <h2 class="note" id="top">Hi</h2>
    CSS:
    .note { color: yellow; }
    #top { color: green; }
    h2 { color: white; } (a) green (b) orange (c) yellow (d) white
21. 21.✍️ What is the selector in this CSS rule?
    h2 {
      padding: 8px;
      margin: 10px;
      border: 2px solid;
    } (a) h2 (b) h1 (c) padding (d) 10px
22. 22.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) neither (c) the later one (d) the first one
23. 23.✍️ What is the selector in this CSS rule?
    h2 {
      font-style: italic;
      width: 300px;
      background-color: yellow;
    } (a) h2 (b) h1 (c) 300px (d) font-style
24. 24.✍️ What value is given to color in this rule?
    body {
      color: red;
      margin: 10px;
      background-color: yellow;
      font-size: 20px;
    } (a) color (b) 20px (c) center (d) red
25. 25.True or false: JavaScript puts a picture on a page. (a) False (b) True
26. 26.✍️ In color: blue; which part is the value? (a) color (b) : (c) ; (d) blue
27. 27.🧩 Which language changes the page live? (a) HTML (b) CSS (c) JavaScript
28. 28.✍️ Which property is set to 8px in this rule?
    #top {
      color: red;
      padding: 8px;
      font-style: italic;
      background-color: yellow;
    } (a) 8px (b) padding (c) font-weight (d) border
29. 29.🎨 Which attribute adds CSS inside one tag? (a) href (b) style (c) alt (d) src
30. 30.Which of these does CSS do? (a) changes the page live (b) gives the page structure (c) rounds box corners (d) reacts to a button click
31. 31.⚖️ Which selector is the strongest? (a) an id selector (b) an element selector (c) a class selector
32. 32.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 16px;
      }
    } (a) No (b) Yes
33. 33.True or false: .card is a class selector. (a) True (b) False
34. 34.🔍 Which is the odd one out? (a) makes a link (b) counts down a timer (c) makes headings and lists (d) gives the page structure
35. 35.🎨 One CSS file can style how many pages? (a) many pages (b) only one word (c) no pages (d) only one image
36. 36.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 200px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 80px wide (no margins).
37. 37.🔍 Which is the odd one out? (a) changes the text size (b) shows a pop-up message (c) adds space around boxes (d) sets colours and fonts
38. 38.What does font-size do? (a) makes the text bold (b) picks the font style (c) makes letters bigger (d) sets the letter colour
39. 39.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 8px;
      }
    } (a) Yes (b) No
40. 40.🔍 Which is the odd one out? (a) makes a link (b) makes headings and lists (c) makes a form box (d) lays out the page

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