CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 467 · 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.🌈 Which hex code is white? (a) #ff0000 (b) #ffffff (c) #000000 (d) #ff00ff
2. 2.✍️ Which sign goes between a property and its value? (a) = (b) : (c) - (d) ;
3. 3.🎯 Which element does the selector span style? (a) <h1 class="star"> (b) <p> (c) <h2 id="end"> (d) <span class="star">
4. 4.🔍 Which is the odd one out? (a) rounds box corners (b) adds space around boxes (c) counts down a timer (d) sets colours and fonts
5. 5.⚖️ What colour is the text of this element?
   <p class="red" id="intro">Hi</p>
   CSS:
   #intro { color: orange; }
   #intro { color: red; } (a) blue (b) red (c) orange (d) yellow
6. 6.Which of these does HTML do? (a) counts down a timer (b) changes the page live (c) makes headings and lists (d) rounds box corners
7. 7.🎯 Which sign starts an id selector? (a) @ (b) . (c) & (d) #
8. 8.✍️ What value is given to text-align in this rule?
   h1 {
     text-align: center;
     padding: 8px;
   } (a) text-align (b) yellow (c) 10px (d) center
9. 9.Which of these does HTML do? (a) makes a link (b) changes the text size (c) lays out the page (d) adds space around boxes
10. 10.Which of these does JavaScript do? (a) puts a picture on a page (b) changes the text size (c) makes a form box (d) shows a pop-up message
11. 11.🌈 Which colour is #000000? (a) white (b) black (c) cyan (d) magenta
12. 12.What does font-weight do? (a) makes letters bigger (b) makes the text bold (c) colours behind the text (d) sets the letter colour
13. 13.🎨 Which tag connects an outside CSS file? (a) <a> (b) <link> (c) <img> (d) <css>
14. 14.✍️ Which property is set to italic in this rule?
    .box {
      font-style: italic;
      color: red;
      width: 300px;
      font-weight: bold;
    } (a) color (b) font-style (c) font-size (d) italic
15. 15.🌈 Which colour of light is strongest in rgb(54, 156, 47)? (a) green (b) red (c) blue
16. 16.⚖️ What colour is the text of this element?
    <h1 class="menu" id="main">Hi</h1>
    CSS:
    #main { color: black; }
    #main { color: red; } (a) black (b) yellow (c) red (d) purple
17. 17.True or false: the content is space inside the border. (a) False (b) True
18. 18.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 340px;
      justify-content: center;
    }
    Inside are 2 boxes, each 100px wide (no margins).
19. 19.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      color: red;
      font-style: italic;
      font-weight: bold;
    }
20. 20.✍️ In color: blue; which part is the property? (a) blue (b) ; (c) : (d) color
21. 21.🎯 What kind of selector is .card? (a) a class selector (b) an element selector (c) an id selector
22. 22.🔍 Which is the odd one out? (a) gives the page structure (b) makes a form box (c) makes headings and lists (d) reacts to a button click
23. 23.💪 Which justify-content value equal gaps, none at ends? (a) center (b) flex-start (c) flex-end (d) space-between
24. 24.🌈 Which hex code is magenta? (a) #ff00ff (b) #000000 (c) #00ff00 (d) #ffffff
25. 25.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      font-weight: bold;
      color: red;
      font-size: 20px;
    }
26. 26.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 250px;
      padding: 25px;
      border: 3px solid black;
      margin: 5px;
    }
27. 27.What does color do? (a) makes letters bigger (b) colours behind the text (c) centres a heading (d) sets the letter colour
28. 28.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) neither (c) the first one (d) the later one
29. 29.What does font-family do? (a) makes letters bigger (b) picks the font style (c) sets the letter colour (d) makes the text bold
30. 30.🖌️ What colour are the letters?
    p {
      font-size: 24px;
      background-color: green;
      text-align: center;
      color: yellow;
    } (a) green (b) yellow (c) purple
31. 31.✍️ Which sign ends each CSS declaration? (a) , (b) . (c) ; (d) :
32. 32.⚖️ What colour is the text of this element?
    <h1 class="red" id="top">Hi</h1>
    CSS:
    .red { color: green; }
    .red { color: black; } (a) purple (b) green (c) white (d) black
33. 33.🌈 Which hex code is cyan? (a) #ffff00 (b) #00ffff (c) #ff0000 (d) #ff00ff
34. 34.🎯 Can many elements share the same class? (a) No (b) Yes
35. 35.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
36. 36.True or false: .big is an id selector. (a) True (b) False
37. 37.📦 In the box model, which part is the gap to other boxes? (a) content (b) padding (c) border (d) margin
38. 38.🎨 One CSS file can style how many pages? (a) only one word (b) many pages (c) only one image (d) no pages
39. 39.Which of these is margin? (a) the gap to other boxes (b) the text or picture (c) a solid or dotted edge (d) the line round the box
40. 40.✍️ What value is given to font-style in this rule?
    p {
      text-align: center;
      font-style: italic;
      color: red;
    } (a) font-style (b) red (c) 20px (d) italic

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