CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 899 · 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.🖌️ How big is the text, in px?
   p {
     text-align: left;
     background-color: blue;
     color: red;
     font-size: 20px;
   }
2. 2.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 20px;
     }
   }
3. 3.✍️ In color: blue; which part is the value? (a) color (b) : (c) blue (d) ;
4. 4.⚖️ What colour is the text of this element?
   <p class="star" id="logo">Hi</p>
   CSS:
   #logo { color: purple; }
   p { color: green; } (a) green (b) yellow (c) black (d) purple
5. 5.What does justify-content: flex-start do? (a) packs boxes at the end (b) puts boxes in the middle (c) equal gaps, none at ends (d) packs boxes at the start
6. 6.🌈 Which colour is rgb(255, 0, 255)? (a) red (b) magenta (c) blue (d) white
7. 7.💪 Which flexbox property spaces boxes along a row? (a) justify-content (b) display: flex (c) align-items (d) gap
8. 8.🎯 Which CSS selector matches this element?
   <h1 class="big" id="top">Hello</h1> (a) .top (b) h1 (c) h2 (d) .red
9. 9.🖌️ Which CSS property picks the font style? (a) font-family (b) background-color (c) color (d) font-weight
10. 10.True or false: padding is a solid or dotted edge. (a) True (b) False
11. 11.📱 Responsive design means a page ___. (a) never changes (b) fits every screen (c) is only for laptops (d) has no pictures
12. 12.🖌️ Where does the text sit on its line?
    h1 {
      background-color: orange;
      color: green;
      font-size: 20px;
      text-align: left;
    } (a) on the left (b) on the right (c) in the middle
13. 13.✍️ In color: blue; which part is the property? (a) : (b) color (c) blue (d) ;
14. 14.⚖️ What colour is the text of this element?
    <p class="menu" id="hero">Hi</p>
    CSS:
    #hero { color: white; }
    #hero { color: green; } (a) red (b) white (c) yellow (d) green
15. 15.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 70px;
      padding: 15px;
      border: 1px solid black;
      margin: 10px;
    }
16. 16.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 120px;
      padding: 10px;
      border: 4px solid black;
      margin: 15px;
    }
17. 17.🖌️ Where does the text sit on its line?
    p {
      font-size: 24px;
      color: purple;
      text-align: center;
      background-color: yellow;
    } (a) on the left (b) on the right (c) in the middle
18. 18.What does background-color do? (a) colours behind the text (b) makes the text bold (c) makes letters bigger (d) sets the letter colour
19. 19.True or false: margin is space outside the border. (a) False (b) True
20. 20.True or false: JavaScript lays out the page. (a) False (b) True
21. 21.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the shorter one (c) the first one (d) the later one
22. 22.🌈 Which colour is #0000ff? (a) blue (b) magenta (c) bright green (d) black
23. 23.🧩 Which language shows a pop-up message? (a) CSS (b) HTML (c) JavaScript
24. 24.✍️ Which property is set to italic in this rule?
    h1 {
      font-style: italic;
      text-align: center;
      background-color: yellow;
    } (a) italic (b) font-style (c) color (d) font-size
25. 25.🌈 Which hex code is red? (a) #00ffff (b) #ff0000 (c) #00ff00 (d) #000000
26. 26.📱 What does a media query check? (a) the battery level (b) the page title (c) the screen width (d) the time of day
27. 27.✍️ What is the selector in this CSS rule?
    li {
      font-size: 20px;
      font-style: italic;
      border: 2px solid;
      color: red;
    } (a) italic (b) body (c) li (d) font-size
28. 28.What does text-align do? (a) sets the letter colour (b) centres a heading (c) picks the font style (d) makes letters bigger
29. 29.📦 In the box model, which part is the gap to other boxes? (a) content (b) margin (c) border (d) padding
30. 30.💪 Which justify-content value puts boxes in the middle? (a) center (b) flex-end (c) flex-start (d) space-between
31. 31.🎨 Which attribute adds CSS inside one tag? (a) alt (b) href (c) src (d) style
32. 32.🎯 Can many elements share the same class? (a) No (b) Yes
33. 33.🔍 Which is the odd one out? (a) counts down a timer (b) adds space around boxes (c) shows a pop-up message (d) reacts to a button click
34. 34.✍️ What value is given to text-align in this rule?
    #top {
      width: 300px;
      text-align: center;
    } (a) text-align (b) 10px (c) yellow (d) center
35. 35.⚖️ What colour is the text of this element?
    <h1 class="menu" id="logo">Hi</h1>
    CSS:
    .menu { color: white; }
    h1 { color: green; } (a) white (b) blue (c) purple (d) green
36. 36.💪 Which flexbox property turns on flexbox? (a) display: flex (b) flex-direction (c) gap (d) justify-content
37. 37.🎯 Which sign starts a class selector? (a) # (b) @ (c) & (d) .
38. 38.True or false: margin is the gap to other boxes. (a) False (b) True
39. 39.True or false: the content is space outside the border. (a) True (b) False
40. 40.What does font-weight do? (a) makes the text bold (b) colours behind the text (c) picks the font style (d) makes letters bigger

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