CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 953 · 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 value? (a) ; (b) : (c) blue (d) color
2. 2.⚖️ What colour is the text of this element?
   <p class="red" id="logo">Hi</p>
   CSS:
   .red { color: orange; }
   p { color: purple; } (a) red (b) black (c) purple (d) orange
3. 3.What does font-weight do? (a) picks the font style (b) makes the text bold (c) colours behind the text (d) sets the letter colour
4. 4.Which of these does CSS do? (a) makes headings and lists (b) lays out the page (c) makes a form box (d) gives the page structure
5. 5.⚖️ What colour is the text of this element?
   <h2 class="big" id="hero">Hi</h2>
   CSS:
   .big { color: orange; }
   h2 { color: yellow; } (a) yellow (b) blue (c) green (d) orange
6. 6.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 18px;
     }
   }
7. 7.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 14px;
     }
   }
8. 8.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 28px;
     }
   }
9. 9.📱 The screen is 320px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 20px;
     }
   } (a) No (b) Yes
10. 10.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) 800px or wider (c) turned off (d) exactly 100px
11. 11.🖌️ What colour is behind the letters?
    p {
      color: red;
      font-size: 40px;
      text-align: right;
      background-color: white;
    } (a) black (b) white (c) red
12. 12.✍️ What is the selector in this CSS rule?
    h2 {
      margin: 10px;
      font-size: 20px;
      font-style: italic;
      background-color: yellow;
    } (a) h2 (b) 20px (c) margin (d) h1
13. 13.✍️ Which property is set to 300px in this rule?
    .box {
      width: 300px;
      text-align: center;
    } (a) width (b) color (c) 300px (d) font-style
14. 14.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 580px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 100px wide (no margins).
15. 15.🎨 One CSS file can style how many pages? (a) only one word (b) no pages (c) many pages (d) only one image
16. 16.⚖️ What colour is the text of this element?
    <h2 class="red" id="end">Hi</h2>
    CSS:
    h2 { color: yellow; }
    .red { color: black; } (a) yellow (b) red (c) black (d) blue
17. 17.🖌️ Where does the text sit on its line?
    p {
      font-size: 32px;
      text-align: left;
      background-color: red;
      color: blue;
    } (a) in the middle (b) on the left (c) on the right
18. 18.🖌️ Where does the text sit on its line?
    h2 {
      color: green;
      text-align: center;
      font-size: 40px;
      background-color: red;
    } (a) in the middle (b) on the left (c) on the right
19. 19.Which of these does CSS do? (a) makes a link (b) sets colours and fonts (c) checks a quiz answer (d) gives the page structure
20. 20.🎯 How many elements on a page should have the same id? (a) any number (b) 1 (c) 2 (d) 5
21. 21.🌈 What is the biggest number one colour can have in rgb()? (a) 1000 (b) 100 (c) 99 (d) 255
22. 22.⚖️ Which selector is the weakest? (a) a class selector (b) an element selector (c) an id selector
23. 23.🌈 Which colour is #ffff00? (a) red (b) black (c) yellow (d) blue
24. 24.🌈 Which hex code is bright green? (a) #ffff00 (b) #00ff00 (c) #ffffff (d) #00ffff
25. 25.💪 Which flexbox property turns on flexbox? (a) align-items (b) gap (c) justify-content (d) display: flex
26. 26.True or false: CSS lays out the page. (a) True (b) False
27. 27.Which of these is the content? (a) the text or picture (b) space inside the border (c) the gap round content (d) the line round the box
28. 28.🖌️ Which CSS property picks the font style? (a) text-align (b) font-family (c) font-weight (d) color
29. 29.🖌️ How big is the text, in px?
    h2 {
      background-color: red;
      font-size: 16px;
      text-align: left;
      color: white;
    }
30. 30.✍️ What value is given to width in this rule?
    h1 {
      width: 300px;
      border: 2px solid;
      font-size: 20px;
    } (a) 300px (b) italic (c) red (d) width
31. 31.🌈 In #f70000 the red part is the hex number f7. What is it as a normal number?
32. 32.✍️ What is the selector in this CSS rule?
    p {
      margin: 10px;
      color: red;
      font-size: 20px;
      background-color: yellow;
    } (a) margin (b) .note (c) red (d) p
33. 33.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) exactly 1000px (c) turned off (d) 600px or wider
34. 34.🌈 Which colour is rgb(255, 0, 255)? (a) blue (b) magenta (c) yellow (d) red
35. 35.⚖️ What colour is the text of this element?
    <h1 class="star" id="end">Hi</h1>
    CSS:
    #end { color: blue; }
    #end { color: black; } (a) red (b) black (c) white (d) blue
36. 36.🎯 Can many elements share the same class? (a) No (b) Yes
37. 37.✍️ What value is given to width in this rule?
    p {
      width: 300px;
      background-color: yellow;
    } (a) italic (b) red (c) 300px (d) width
38. 38.🔍 Which is the odd one out? (a) makes headings and lists (b) checks a quiz answer (c) puts a picture on a page (d) gives the page structure
39. 39.True or false: HTML makes headings and lists. (a) False (b) True
40. 40.🔍 Which is the odd one out? (a) makes a link (b) gives the page structure (c) makes headings and lists (d) sets colours and fonts

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