CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 897 · 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 kind of selector is #main? (a) an id selector (b) an element selector (c) a class selector
2. 2.✍️ Which property is set to bold in this rule?
   h2 {
     width: 300px;
     font-size: 20px;
     font-weight: bold;
   } (a) border (b) bold (c) width (d) font-weight
3. 3.⚖️ What colour is the text of this element?
   <h1 class="note" id="hero">Hi</h1>
   CSS:
   h1 { color: yellow; }
   .note { color: white; }
   #hero { color: black; } (a) yellow (b) white (c) black (d) green
4. 4.What does color do? (a) sets the letter colour (b) colours behind the text (c) makes the text bold (d) makes letters bigger
5. 5.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the first one (c) the later one (d) neither
6. 6.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 2 (c) 4 (d) 3
7. 7.🧩 Which language changes the page live? (a) HTML (b) JavaScript (c) CSS
8. 8.✍️ What value is given to font-style in this rule?
   h2 {
     background-color: yellow;
     font-style: italic;
     color: red;
     font-size: 20px;
   } (a) red (b) 20px (c) font-style (d) italic
9. 9.🖌️ What colour are the letters?
   p {
     font-size: 12px;
     color: red;
     text-align: left;
     background-color: black;
   } (a) red (b) black (c) blue
10. 10.Which of these is the content? (a) the text or picture (b) the gap round content (c) space inside the border (d) the line round the box
11. 11.📱 Responsive design means a page ___. (a) has no pictures (b) is only for laptops (c) never changes (d) fits every screen
12. 12.🎯 Which CSS selector matches this element?
    <h1 class="red" id="logo">Hello</h1> (a) .box (b) h2 (c) h1 (d) #end
13. 13.True or false: CSS checks a quiz answer. (a) False (b) True
14. 14.🔍 Which is the odd one out? (a) makes headings and lists (b) adds space around boxes (c) puts a picture on a page (d) makes a link
15. 15.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 260px;
      padding: 10px;
      border: 1px solid black;
      margin: 10px;
    }
16. 16.Which of these does CSS do? (a) makes headings and lists (b) lays out the page (c) gives the page structure (d) puts a picture on a page
17. 17.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 32px;
      }
    } (a) No (b) Yes
18. 18.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 110px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 50px wide (no margins).
19. 19.What does text-align do? (a) sets the letter colour (b) makes letters bigger (c) makes the text bold (d) centres a heading
20. 20.🌈 Which colour is #000000? (a) red (b) black (c) magenta (d) bright green
21. 21.🌈 Which colour is rgb(0, 0, 255)? (a) yellow (b) red (c) blue (d) white
22. 22.🧩 Which language makes headings and lists? (a) HTML (b) JavaScript (c) CSS
23. 23.True or false: the content is space inside the border. (a) True (b) False
24. 24.✍️ Which sign ends each CSS declaration? (a) . (b) , (c) : (d) ;
25. 25.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 18px;
      }
    }
26. 26.🌈 Which hex code is yellow? (a) #00ffff (b) #ffff00 (c) #ff00ff (d) #00ff00
27. 27.Which of these is the border? (a) the text or picture (b) the line round the box (c) space outside the border (d) the gap round content
28. 28.True or false: p is a class selector. (a) False (b) True
29. 29.True or false: margin is space inside the border. (a) False (b) True
30. 30.Which of these does CSS do? (a) adds space around boxes (b) shows a pop-up message (c) makes a form box (d) counts down a timer
31. 31.🌈 Hex digits go 0 to 9, then A to which letter? (a) J (b) Z (c) F (d) G
32. 32.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 30px;
      }
    }
33. 33.✍️ In color: blue; which part is the value? (a) ; (b) : (c) blue (d) color
34. 34.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 120px;
      padding: 5px;
      border: 3px solid black;
      margin: 10px;
    }
35. 35.✍️ What is the selector in this CSS rule?
    #top {
      font-style: italic;
      border: 2px solid;
      font-size: 20px;
    } (a) 2px solid (b) li (c) font-style (d) #top
36. 36.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 24px;
      }
    } (a) No (b) Yes
37. 37.🔍 Which is the odd one out? (a) makes headings and lists (b) gives the page structure (c) puts a picture on a page (d) changes the text size
38. 38.🖌️ Where does the text sit on its line?
    li {
      text-align: center;
      color: red;
      background-color: orange;
      font-size: 28px;
    } (a) in the middle (b) on the left (c) on the right
39. 39.🎯 What kind of selector is .big? (a) an id selector (b) an element selector (c) a class selector
40. 40.True or false: HTML puts a picture on a page. (a) True (b) False

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