CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 791 · 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 colour is the text of this element?
   <p class="red" id="main">Hi</p>
   CSS:
   p { color: blue; }
   p { color: orange; } (a) orange (b) blue (c) white (d) yellow
2. 2.🎯 What kind of selector is #main? (a) an id selector (b) an element selector (c) a class selector
3. 3.🌈 Which colour is rgb(255, 0, 0)? (a) magenta (b) bright green (c) red (d) cyan
4. 4.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the shorter one (c) the later one (d) the first one
5. 5.⚖️ What colour is the text of this element?
   <h2 class="box" id="intro">Hi</h2>
   CSS:
   .box { color: red; }
   #intro { color: blue; } (a) red (b) white (c) blue (d) orange
6. 6.⚖️ Which selector is the weakest? (a) an element selector (b) an id selector (c) a class selector
7. 7.🖌️ How big is the text, in px?
   h2 {
     text-align: center;
     color: orange;
     font-size: 28px;
     background-color: black;
   }
8. 8.🌈 In #rrggbb, which colour do the last two digits give? (a) blue (b) red (c) white (d) green
9. 9.🖌️ Which CSS property colours behind the text? (a) background-color (b) color (c) font-family (d) font-size
10. 10.🎯 Which CSS selector matches this element?
    <div class="red" id="top">Hello</div> (a) .red (b) .top (c) #red (d) .box
11. 11.💪 Which justify-content value equal gaps, none at ends? (a) center (b) flex-end (c) flex-start (d) space-between
12. 12.True or false: HTML puts a picture on a page. (a) False (b) True
13. 13.✍️ CSS declarations go inside which brackets? (a) < > (b) [ ] (c) ( ) (d) { }
14. 14.💪 Which flexbox property spaces boxes along a row? (a) justify-content (b) flex-direction (c) display: flex (d) gap
15. 15.🔍 Which is the odd one out? (a) rounds box corners (b) makes headings and lists (c) sets colours and fonts (d) changes the text size
16. 16.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) black (c) green (d) blue
17. 17.⚖️ What colour is the text of this element?
    <p class="star" id="intro">Hi</p>
    CSS:
    p { color: blue; }
    p { color: yellow; } (a) blue (b) white (c) black (d) yellow
18. 18.✍️ Which property is set to 20px in this rule?
    #top {
      font-size: 20px;
      font-weight: bold;
    } (a) background-color (b) 20px (c) text-align (d) font-size
19. 19.✍️ What is the selector in this CSS rule?
    li {
      margin: 10px;
      text-align: center;
    } (a) body (b) center (c) margin (d) li
20. 20.🎯 Which CSS selector matches this element?
    <h2 class="note" id="top">Hello</h2> (a) #intro (b) #top (c) li (d) .top
21. 21.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 22px;
      }
    } (a) No (b) Yes
22. 22.Which of these is padding? (a) a solid or dotted edge (b) the gap to other boxes (c) space inside the border (d) space outside the border
23. 23.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 28px;
      }
    } (a) No (b) Yes
24. 24.Which of these does HTML do? (a) lays out the page (b) puts a picture on a page (c) rounds box corners (d) adds space around boxes
25. 25.🎯 Can many elements share the same class? (a) Yes (b) No
26. 26.What does justify-content: flex-end do? (a) packs boxes at the start (b) packs boxes at the end (c) equal gaps, none at ends (d) puts boxes in the middle
27. 27.⚖️ What colour is the text of this element?
    <h1 class="big" id="logo">Hi</h1>
    CSS:
    .big { color: blue; }
    .big { color: orange; } (a) purple (b) orange (c) yellow (d) blue
28. 28.📱 Responsive design means a page ___. (a) has no pictures (b) fits every screen (c) is only for laptops (d) never changes
29. 29.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 230px;
      padding: 30px;
      border: 2px solid black;
      margin: 10px;
    }
30. 30.✍️ Which sign ends each CSS declaration? (a) . (b) ; (c) , (d) :
31. 31.🖌️ What colour is behind the letters?
    h2 {
      text-align: center;
      background-color: orange;
      font-size: 12px;
      color: blue;
    } (a) black (b) blue (c) orange
32. 32.🖌️ Where does the text sit on its line?
    h1 {
      font-size: 32px;
      text-align: right;
      background-color: green;
      color: black;
    } (a) on the right (b) in the middle (c) on the left
33. 33.True or false: .menu is an id selector. (a) False (b) True
34. 34.🎨 One CSS file can style how many pages? (a) only one word (b) no pages (c) only one image (d) many pages
35. 35.What does font-size do? (a) makes the text bold (b) centres a heading (c) makes letters bigger (d) picks the font style
36. 36.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      width: 300px;
    }
37. 37.🎨 What does CSS stand for? (a) Cascading Style Sheets (b) Colourful Site Styles (c) Creative Sheet System (d) Computer Style Sheets
38. 38.🌈 Which colour of light is strongest in rgb(221, 96, 55)? (a) green (b) blue (c) red
39. 39.Which of these is the border? (a) space outside the border (b) the gap round content (c) the line round the box (d) the gap to other boxes
40. 40.🎯 Which CSS selector matches this element?
    <h2 class="menu" id="hero">Hello</h2> (a) #menu (b) .note (c) li (d) .menu

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