CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 844 · 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.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) 800px or wider (c) exactly 100px (d) turned off
2. 2.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 110px;
     padding: 15px;
     border: 2px solid black;
     margin: 15px;
   }
3. 3.🌈 Which colour is #000000? (a) red (b) blue (c) black (d) white
4. 4.🖌️ What colour are the letters?
   h1 {
     color: red;
     background-color: yellow;
     text-align: left;
     font-size: 36px;
   } (a) purple (b) yellow (c) red
5. 5.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the first one (c) the later one (d) neither
6. 6.✍️ Which property is set to yellow in this rule?
   .box {
     background-color: yellow;
     color: red;
   } (a) margin (b) padding (c) background-color (d) yellow
7. 7.What does font-size do? (a) colours behind the text (b) makes letters bigger (c) sets the letter colour (d) makes the text bold
8. 8.🌈 Which colour is #ff00ff? (a) cyan (b) black (c) magenta (d) yellow
9. 9.🖌️ What colour are the letters?
   h1 {
     font-size: 24px;
     background-color: red;
     text-align: left;
     color: green;
   } (a) red (b) black (c) green
10. 10.🎨 Which tag connects an outside CSS file? (a) <a> (b) <img> (c) <css> (d) <link>
11. 11.True or false: CSS counts down a timer. (a) False (b) True
12. 12.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      font-style: italic;
      font-size: 20px;
      font-weight: bold;
    }
13. 13.Which of these does HTML do? (a) sets colours and fonts (b) gives the page structure (c) adds space around boxes (d) changes the text size
14. 14.💪 Which flexbox property picks row or column? (a) justify-content (b) gap (c) flex-direction (d) display: flex
15. 15.🎨 One CSS file can style how many pages? (a) many pages (b) only one image (c) only one word (d) no pages
16. 16.Which of these does JavaScript do? (a) shows a pop-up message (b) makes headings and lists (c) adds space around boxes (d) puts a picture on a page
17. 17.🎯 Which CSS selector matches this element?
    <h1 class="menu" id="hero">Hello</h1> (a) #menu (b) .note (c) .menu (d) .hero
18. 18.True or false: #top is an id selector. (a) False (b) True
19. 19.✍️ What value is given to color in this rule?
    li {
      background-color: yellow;
      font-style: italic;
      color: red;
      font-size: 20px;
    } (a) center (b) color (c) 20px (d) red
20. 20.True or false: body is a class selector. (a) False (b) True
21. 21.🖌️ Which CSS property centres a heading? (a) text-align (b) background-color (c) font-weight (d) font-family
22. 22.✍️ In color: blue; which part is the property? (a) : (b) color (c) ; (d) blue
23. 23.🖌️ Where does the text sit on its line?
    li {
      text-align: center;
      background-color: yellow;
      color: blue;
      font-size: 16px;
    } (a) on the right (b) on the left (c) in the middle
24. 24.🎯 What kind of selector is img? (a) an element selector (b) a class selector (c) an id selector
25. 25.🎯 What kind of selector is #end? (a) a class selector (b) an element selector (c) an id selector
26. 26.🎨 Which attribute adds CSS inside one tag? (a) alt (b) src (c) style (d) href
27. 27.🔍 Which is the odd one out? (a) changes the page live (b) rounds box corners (c) sets colours and fonts (d) lays out the page
28. 28.🖌️ How big is the text, in px?
    h1 {
      color: red;
      font-size: 12px;
      background-color: blue;
      text-align: left;
    }
29. 29.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 300px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 60px wide (no margins).
30. 30.🎯 How many elements on a page should have the same id? (a) any number (b) 2 (c) 1 (d) 5
31. 31.True or false: JavaScript adds space around boxes. (a) True (b) False
32. 32.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the hr tag (c) the br tag (d) the viewport meta tag
33. 33.⚖️ What colour is the text of this element?
    <h1 class="red" id="main">Hi</h1>
    CSS:
    h1 { color: red; }
    h1 { color: blue; } (a) yellow (b) red (c) white (d) blue
34. 34.🌈 Hex digits go 0 to 9, then A to which letter? (a) G (b) F (c) Z (d) J
35. 35.💪 Which justify-content value equal gaps, none at ends? (a) center (b) flex-end (c) space-between (d) flex-start
36. 36.🎯 Which sign starts a class selector? (a) & (b) # (c) . (d) @
37. 37.✍️ Which property is set to red in this rule?
    h1 {
      background-color: yellow;
      font-size: 20px;
      padding: 8px;
      color: red;
    } (a) font-size (b) color (c) red (d) text-align
38. 38.✍️ CSS declarations go inside which brackets? (a) < > (b) { } (c) [ ] (d) ( )
39. 39.✍️ Which property is set to 300px in this rule?
    p {
      padding: 8px;
      width: 300px;
    } (a) color (b) font-style (c) width (d) 300px
40. 40.🖌️ Which CSS property colours behind the text? (a) font-weight (b) font-family (c) background-color (d) color

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