CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 245 · 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 text-align do? (a) makes the text bold (b) picks the font style (c) sets the letter colour (d) centres a heading
2. 2.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 14px;
     }
   }
3. 3.🔍 Which is the odd one out? (a) gives the page structure (b) rounds box corners (c) sets colours and fonts (d) lays out the page
4. 4.💪 Which flexbox property spaces boxes along a row? (a) display: flex (b) justify-content (c) flex-direction (d) align-items
5. 5.Which of these is the content? (a) the gap round content (b) a solid or dotted edge (c) the text or picture (d) the gap to other boxes
6. 6.✍️ What is the selector in this CSS rule?
   .box {
     font-size: 20px;
     color: red;
   } (a) h2 (b) red (c) .box (d) font-size
7. 7.⚖️ What colour is the text of this element?
   <p class="menu" id="end">Hi</p>
   CSS:
   #end { color: green; }
   .menu { color: black; }
   p { color: orange; } (a) purple (b) orange (c) green (d) black
8. 8.⚖️ What colour is the text of this element?
   <h1 class="box" id="logo">Hi</h1>
   CSS:
   h1 { color: red; }
   .box { color: black; } (a) orange (b) black (c) red (d) purple
9. 9.🎯 What kind of selector is .menu? (a) a class selector (b) an id selector (c) an element selector
10. 10.True or false: JavaScript puts a picture on a page. (a) True (b) False
11. 11.🖌️ What colour are the letters?
    h1 {
      font-size: 12px;
      text-align: left;
      background-color: white;
      color: yellow;
    } (a) white (b) yellow (c) blue
12. 12.What does justify-content: center do? (a) puts boxes in the middle (b) packs boxes at the start (c) equal gaps, none at ends (d) packs boxes at the end
13. 13.What does color do? (a) colours behind the text (b) sets the letter colour (c) makes the text bold (d) makes letters bigger
14. 14.✍️ What value is given to font-style in this rule?
    .note {
      font-style: italic;
      font-weight: bold;
    } (a) font-style (b) italic (c) red (d) 20px
15. 15.📦 In the box model, which part is space outside the border? (a) content (b) margin (c) border (d) padding
16. 16.What does justify-content: flex-start do? (a) packs boxes at the start (b) equal gaps, none at ends (c) packs boxes at the end (d) puts boxes in the middle
17. 17.True or false: margin is the text or picture. (a) True (b) False
18. 18.⚖️ What colour is the text of this element?
    <p class="box" id="main">Hi</p>
    CSS:
    #main { color: purple; }
    p { color: red; } (a) blue (b) purple (c) green (d) red
19. 19.True or false: .big is an id selector. (a) True (b) False
20. 20.🎯 Which element does the selector .note style? (a) <div class="red"> (b) <li id="note"> (c) <li class="big"> (d) <li class="note">
21. 21.📱 What does a media query check? (a) the screen width (b) the page title (c) the battery level (d) the time of day
22. 22.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 6px;
      }
    } (a) No (b) Yes
23. 23.🌈 Which colour is rgb(255, 0, 0)? (a) magenta (b) cyan (c) red (d) white
24. 24.⚖️ Which selector is the strongest? (a) a class selector (b) an element selector (c) an id selector
25. 25.🌈 Which colour of light is strongest in rgb(18, 206, 109)? (a) red (b) blue (c) green
26. 26.⚖️ What colour is the text of this element?
    <h1 class="menu" id="top">Hi</h1>
    CSS:
    .menu { color: black; }
    h1 { color: blue; }
    #top { color: purple; } (a) blue (b) black (c) purple (d) yellow
27. 27.🖌️ What colour are the letters?
    h1 {
      background-color: purple;
      color: red;
      text-align: left;
      font-size: 12px;
    } (a) purple (b) blue (c) red
28. 28.🎯 Which CSS selector matches this element?
    <p class="star" id="top">Hello</p> (a) #star (b) #intro (c) h1 (d) #top
29. 29.✍️ CSS declarations go inside which brackets? (a) < > (b) ( ) (c) [ ] (d) { }
30. 30.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 16px;
      }
    }
31. 31.🔍 Which is the odd one out? (a) counts down a timer (b) makes a form box (c) makes headings and lists (d) makes a link
32. 32.🎯 Which CSS selector matches this element?
    <h1 class="big" id="intro">Hello</h1> (a) .red (b) #main (c) #intro (d) h2
33. 33.🎯 Which sign starts a class selector? (a) . (b) & (c) @ (d) #
34. 34.🎯 Which element does the selector div style? (a) <h1 id="intro"> (b) <div class="big"> (c) <p class="big"> (d) <span>
35. 35.🎯 How many elements on a page should have the same id? (a) 2 (b) 1 (c) any number (d) 5
36. 36.✍️ What value is given to margin in this rule?
    p {
      text-align: center;
      margin: 10px;
    } (a) bold (b) 10px (c) margin (d) 8px
37. 37.True or false: HTML makes a form box. (a) False (b) True
38. 38.🖌️ What colour is behind the letters?
    li {
      background-color: yellow;
      color: purple;
      text-align: center;
      font-size: 20px;
    } (a) yellow (b) purple (c) orange
39. 39.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 210px;
      padding: 5px;
      border: 2px solid black;
      margin: 0px;
    }
40. 40.True or false: the border is the gap round content. (a) False (b) True

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