CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 960 · 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.✍️ In color: blue; which part is the property? (a) : (b) blue (c) color (d) ;
2. 2.True or false: HTML gives the page structure. (a) False (b) True
3. 3.🖌️ Where does the text sit on its line?
   h1 {
     text-align: right;
     color: red;
     background-color: green;
     font-size: 16px;
   } (a) on the left (b) on the right (c) in the middle
4. 4.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) neither (c) the shorter one (d) the later one
5. 5.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 200px;
     padding: 5px;
     border: 5px solid black;
     margin: 5px;
   }
6. 6.✍️ What value is given to font-weight in this rule?
   p {
     font-style: italic;
     text-align: center;
     font-weight: bold;
   } (a) 300px (b) font-weight (c) 2px solid (d) bold
7. 7.📱 Responsive design means a page ___. (a) has no pictures (b) fits every screen (c) never changes (d) is only for laptops
8. 8.⚖️ What colour is the text of this element?
   <h2 class="star" id="main">Hi</h2>
   CSS:
   #main { color: white; }
   .star { color: purple; } (a) black (b) white (c) purple (d) orange
9. 9.What does justify-content: flex-end do? (a) packs boxes at the start (b) puts boxes in the middle (c) equal gaps, none at ends (d) packs boxes at the end
10. 10.🎨 What does CSS stand for? (a) Creative Sheet System (b) Cascading Style Sheets (c) Computer Style Sheets (d) Colourful Site Styles
11. 11.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 22px;
      }
    } (a) Yes (b) No
12. 12.🌈 Which hex code is bright green? (a) #ffffff (b) #00ff00 (c) #ffff00 (d) #000000
13. 13.📦 In the box model, which part is space inside the border? (a) padding (b) margin (c) border (d) content
14. 14.✍️ What is the selector in this CSS rule?
    .note {
      margin: 10px;
      font-style: italic;
      width: 300px;
    } (a) .note (b) italic (c) margin (d) #top
15. 15.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: center;
    }
    Inside are 2 boxes, each 50px wide (no margins).
16. 16.🎯 Which sign starts a class selector? (a) . (b) & (c) @ (d) #
17. 17.Which of these is margin? (a) a solid or dotted edge (b) space inside the border (c) the gap to other boxes (d) the gap round content
18. 18.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      width: 300px;
      font-size: 20px;
    }
19. 19.What does font-weight do? (a) makes the text bold (b) makes letters bigger (c) colours behind the text (d) picks the font style
20. 20.⚖️ What colour is the text of this element?
    <h1 class="big" id="main">Hi</h1>
    CSS:
    #main { color: purple; }
    #main { color: white; } (a) purple (b) red (c) orange (d) white
21. 21.Which of these is margin? (a) the text or picture (b) space inside the border (c) the line round the box (d) space outside the border
22. 22.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 300px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 80px wide (no margins).
23. 23.🖌️ What colour is behind the letters?
    h1 {
      color: yellow;
      background-color: white;
      text-align: right;
      font-size: 12px;
    } (a) white (b) yellow (c) purple
24. 24.📱 What does a media query check? (a) the battery level (b) the page title (c) the screen width (d) the time of day
25. 25.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 255 (c) 99 (d) 1000
26. 26.🎨 Which tag connects an outside CSS file? (a) <css> (b) <link> (c) <img> (d) <a>
27. 27.True or false: HTML sets colours and fonts. (a) False (b) True
28. 28.🌈 Which colour is rgb(255, 0, 255)? (a) cyan (b) blue (c) magenta (d) white
29. 29.🔍 Which is the odd one out? (a) reacts to a button click (b) changes the page live (c) counts down a timer (d) makes a link
30. 30.True or false: margin is the gap to other boxes. (a) True (b) False
31. 31.🎨 Which attribute adds CSS inside one tag? (a) style (b) src (c) alt (d) href
32. 32.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) center (c) flex-end (d) space-between
33. 33.⚖️ What colour is the text of this element?
    <p class="menu" id="end">Hi</p>
    CSS:
    .menu { color: green; }
    .menu { color: purple; } (a) black (b) orange (c) green (d) purple
34. 34.🖌️ Which CSS property centres a heading? (a) background-color (b) font-size (c) text-align (d) font-family
35. 35.🖌️ How big is the text, in px?
    h1 {
      font-size: 20px;
      color: orange;
      background-color: white;
      text-align: right;
    }
36. 36.🌈 In #00002a the blue part is the hex number 2a. What is it as a normal number?
37. 37.True or false: h1 is an element selector. (a) False (b) True
38. 38.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 340px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 40px wide (no margins).
39. 39.🌈 Which colour is #000000? (a) magenta (b) blue (c) white (d) black
40. 40.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: center;
    }
    Inside are 2 boxes, each 40px wide (no margins).

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