CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 222 · 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 many declarations (property: value pairs) are in this rule?
   p {
     font-style: italic;
     width: 300px;
   }
2. 2.What does color do? (a) centres a heading (b) sets the letter colour (c) picks the font style (d) makes letters bigger
3. 3.🌈 Which hex code is blue? (a) #ff0000 (b) #000000 (c) #00ff00 (d) #0000ff
4. 4.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) turned off (c) exactly 100px (d) 800px or wider
5. 5.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 240px;
     justify-content: flex-end;
   }
   Inside are 3 boxes, each 60px wide (no margins).
6. 6.✍️ How many declarations (property: value pairs) are in this rule?
   h1 {
     font-weight: bold;
   }
7. 7.🎯 What kind of selector is #end? (a) an element selector (b) an id selector (c) a class selector
8. 8.🎯 Which CSS selector matches this element?
   <p class="red" id="main">Hello</p> (a) #logo (b) #main (c) #red (d) .box
9. 9.⚖️ What colour is the text of this element?
   <p class="big" id="end">Hi</p>
   CSS:
   p { color: yellow; }
   p { color: black; } (a) yellow (b) white (c) green (d) black
10. 10.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the later one (c) the shorter one (d) the first one
11. 11.🎯 What kind of selector is .menu? (a) an element selector (b) a class selector (c) an id selector
12. 12.🖌️ Where does the text sit on its line?
    h2 {
      background-color: green;
      color: orange;
      font-size: 40px;
      text-align: left;
    } (a) on the right (b) in the middle (c) on the left
13. 13.True or false: p is an element selector. (a) False (b) True
14. 14.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 70px;
      padding: 30px;
      border: 5px solid black;
      margin: 0px;
    }
15. 15.🎯 Which element does the selector span style? (a) <h1 class="note"> (b) <span class="note"> (c) <p> (d) <h2 id="top">
16. 16.⚖️ What colour is the text of this element?
    <p class="big" id="hero">Hi</p>
    CSS:
    .big { color: white; }
    p { color: purple; } (a) white (b) yellow (c) green (d) purple
17. 17.✍️ Which property is set to yellow in this rule?
    p {
      margin: 10px;
      border: 2px solid;
      background-color: yellow;
    } (a) background-color (b) yellow (c) margin (d) padding
18. 18.Which of these is the border? (a) the gap round content (b) space inside the border (c) the gap to other boxes (d) the line round the box
19. 19.🧩 Which language makes a link? (a) JavaScript (b) HTML (c) CSS
20. 20.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) center (c) space-between (d) flex-start
21. 21.✍️ In color: blue; which part is the value? (a) color (b) ; (c) : (d) blue
22. 22.🎨 One CSS file can style how many pages? (a) only one image (b) no pages (c) many pages (d) only one word
23. 23.⚖️ What colour is the text of this element?
    <h1 class="note" id="intro">Hi</h1>
    CSS:
    #intro { color: red; }
    h1 { color: purple; } (a) orange (b) black (c) purple (d) red
24. 24.🌈 In #000600 the green part is the hex number 06. What is it as a normal number?
25. 25.✍️ CSS declarations go inside which brackets? (a) { } (b) [ ] (c) ( ) (d) < >
26. 26.Which of these does HTML do? (a) rounds box corners (b) counts down a timer (c) reacts to a button click (d) gives the page structure
27. 27.🌈 Which hex code is magenta? (a) #ff00ff (b) #000000 (c) #0000ff (d) #ff0000
28. 28.✍️ What is the selector in this CSS rule?
    p {
      background-color: yellow;
      text-align: center;
      padding: 8px;
      margin: 10px;
    } (a) .note (b) center (c) p (d) background-color
29. 29.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 230px;
      padding: 10px;
      border: 3px solid black;
      margin: 20px;
    }
30. 30.Which of these does JavaScript do? (a) adds space around boxes (b) sets colours and fonts (c) puts a picture on a page (d) checks a quiz answer
31. 31.🎯 What kind of selector is #logo? (a) an element selector (b) an id selector (c) a class selector
32. 32.🎯 Which sign starts an id selector? (a) # (b) & (c) @ (d) .
33. 33.🌈 In #005100 the green part is the hex number 51. What is it as a normal number?
34. 34.What does font-family do? (a) makes the text bold (b) sets the letter colour (c) picks the font style (d) centres a heading
35. 35.True or false: HTML makes headings and lists. (a) True (b) False
36. 36.✍️ Which sign ends each CSS declaration? (a) : (b) , (c) ; (d) .
37. 37.🖌️ What colour are the letters?
    h1 {
      color: blue;
      font-size: 12px;
      background-color: orange;
      text-align: right;
    } (a) yellow (b) blue (c) orange
38. 38.What does background-color do? (a) makes the text bold (b) makes letters bigger (c) colours behind the text (d) sets the letter colour
39. 39.🖌️ Which CSS property sets the letter colour? (a) font-weight (b) text-align (c) color (d) font-family
40. 40.Which of these is margin? (a) space outside the border (b) space inside the border (c) the text or picture (d) a solid or dotted edge

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