CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 529 · 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 does a media query check? (a) the screen width (b) the battery level (c) the time of day (d) the page title
2. 2.True or false: #end is an element selector. (a) False (b) True
3. 3.🧩 Which language changes the page live? (a) HTML (b) CSS (c) JavaScript
4. 4.🖌️ Which CSS property sets the letter colour? (a) font-size (b) background-color (c) color (d) font-family
5. 5.🎯 Which element does the selector h1 style? (a) <h1 class="menu"> (b) <li class="menu"> (c) <div id="intro"> (d) <h2>
6. 6.What does background-color do? (a) makes letters bigger (b) colours behind the text (c) picks the font style (d) centres a heading
7. 7.✍️ What is the selector in this CSS rule?
   #top {
     margin: 10px;
     padding: 8px;
   } (a) margin (b) 8px (c) li (d) #top
8. 8.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 120px;
     justify-content: space-between;
   }
   Inside are 2 boxes, each 50px wide (no margins).
9. 9.🧩 Which language rounds box corners? (a) JavaScript (b) CSS (c) HTML
10. 10.What does color do? (a) sets the letter colour (b) picks the font style (c) colours behind the text (d) makes letters bigger
11. 11.True or false: .big is an element selector. (a) False (b) True
12. 12.🎯 What kind of selector is .menu? (a) an id selector (b) a class selector (c) an element selector
13. 13.True or false: CSS makes a form box. (a) True (b) False
14. 14.🎯 What kind of selector is .star? (a) an id selector (b) a class selector (c) an element selector
15. 15.True or false: the content is the gap round content. (a) False (b) True
16. 16.🌈 Which colour of light is strongest in rgb(77, 34, 205)? (a) green (b) red (c) blue
17. 17.🎯 Which CSS selector matches this element?
    <span class="big" id="top">Hello</span> (a) p (b) #intro (c) span (d) .top
18. 18.💪 Which flexbox property lines boxes up across? (a) justify-content (b) display: flex (c) align-items (d) flex-direction
19. 19.💪 Which justify-content value packs boxes at the start? (a) flex-start (b) space-between (c) flex-end (d) center
20. 20.✍️ Which sign goes between a property and its value? (a) ; (b) : (c) - (d) =
21. 21.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 14px;
      }
    }
22. 22.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 260px;
      padding: 20px;
      border: 1px solid black;
      margin: 10px;
    }
23. 23.🖌️ Where does the text sit on its line?
    h2 {
      background-color: green;
      text-align: left;
      font-size: 40px;
      color: black;
    } (a) in the middle (b) on the left (c) on the right
24. 24.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 90px;
      padding: 20px;
      border: 1px solid black;
      margin: 10px;
    }
25. 25.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 22px;
      }
    }
26. 26.Which of these is padding? (a) a solid or dotted edge (b) the line round the box (c) space inside the border (d) the text or picture
27. 27.🌈 Which colour is rgb(0, 255, 0)? (a) cyan (b) white (c) bright green (d) red
28. 28.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 14px;
      }
    }
29. 29.🖌️ How big is the text, in px?
    h2 {
      font-size: 28px;
      background-color: black;
      color: red;
      text-align: left;
    }
30. 30.🌈 Which hex code is cyan? (a) #ff0000 (b) #ffff00 (c) #00ff00 (d) #00ffff
31. 31.True or false: .menu is an element selector. (a) False (b) True
32. 32.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 26px;
      }
    } (a) No (b) Yes
33. 33.🌈 In #00d800 the green part is the hex number d8. What is it as a normal number?
34. 34.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 20px;
      }
    } (a) Yes (b) No
35. 35.Which of these does HTML do? (a) changes the page live (b) makes a link (c) adds space around boxes (d) sets colours and fonts
36. 36.✍️ In color: blue; which part is the value? (a) color (b) ; (c) blue (d) :
37. 37.What does font-family do? (a) sets the letter colour (b) picks the font style (c) colours behind the text (d) centres a heading
38. 38.📦 In the box model, which part is the line round the box? (a) content (b) margin (c) border (d) padding
39. 39.✍️ Which property is set to yellow in this rule?
    #top {
      margin: 10px;
      text-align: center;
      background-color: yellow;
      font-weight: bold;
    } (a) padding (b) background-color (c) yellow (d) margin
40. 40.🎯 What kind of selector is body? (a) a class selector (b) an id selector (c) an element selector

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