CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 338 · 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 kind of selector is .big? (a) an element selector (b) a class selector (c) an id selector
2. 2.Which of these is the border? (a) the gap to other boxes (b) the gap round content (c) space inside the border (d) a solid or dotted edge
3. 3.✍️ Which property is set to bold in this rule?
   li {
     font-style: italic;
     border: 2px solid;
     font-weight: bold;
     color: red;
   } (a) border (b) font-weight (c) width (d) bold
4. 4.Which of these is padding? (a) the gap to other boxes (b) the line round the box (c) space outside the border (d) space inside the border
5. 5.Which of these does CSS do? (a) gives the page structure (b) makes headings and lists (c) changes the page live (d) adds space around boxes
6. 6.✍️ What is the selector in this CSS rule?
   #top {
     width: 300px;
     margin: 10px;
     font-size: 20px;
   } (a) li (b) #top (c) width (d) 10px
7. 7.🔍 Which is the odd one out? (a) checks a quiz answer (b) shows a pop-up message (c) puts a picture on a page (d) reacts to a button click
8. 8.Which of these does HTML do? (a) rounds box corners (b) makes a form box (c) changes the text size (d) reacts to a button click
9. 9.🎨 One CSS file can style how many pages? (a) many pages (b) no pages (c) only one image (d) only one word
10. 10.🔍 Which is the odd one out? (a) counts down a timer (b) lays out the page (c) sets colours and fonts (d) rounds box corners
11. 11.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 230px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 100px wide (no margins).
12. 12.⚖️ What colour is the text of this element?
    <h2 class="big" id="logo">Hi</h2>
    CSS:
    .big { color: green; }
    #logo { color: white; } (a) blue (b) yellow (c) white (d) green
13. 13.✍️ Which property is set to 10px in this rule?
    p {
      text-align: center;
      margin: 10px;
      background-color: yellow;
      font-size: 20px;
    } (a) 10px (b) margin (c) padding (d) font-weight
14. 14.🖌️ How big is the text, in px?
    h1 {
      background-color: purple;
      font-size: 12px;
      color: white;
      text-align: right;
    }
15. 15.True or false: margin is the gap to other boxes. (a) True (b) False
16. 16.🎯 How many elements on a page should have the same id? (a) 5 (b) 2 (c) 1 (d) any number
17. 17.What does color do? (a) picks the font style (b) makes the text bold (c) centres a heading (d) sets the letter colour
18. 18.🧩 Which language puts a picture on a page? (a) CSS (b) HTML (c) JavaScript
19. 19.✍️ What is the selector in this CSS rule?
    body {
      border: 2px solid;
      font-weight: bold;
      background-color: yellow;
      font-size: 20px;
    } (a) border (b) bold (c) .box (d) body
20. 20.What does text-align do? (a) centres a heading (b) sets the letter colour (c) makes letters bigger (d) picks the font style
21. 21.🎯 What kind of selector is img? (a) a class selector (b) an id selector (c) an element selector
22. 22.🌈 Hex digits go 0 to 9, then A to which letter? (a) Z (b) G (c) J (d) F
23. 23.🎨 What does CSS stand for? (a) Creative Sheet System (b) Colourful Site Styles (c) Cascading Style Sheets (d) Computer Style Sheets
24. 24.💪 Which justify-content value equal gaps, none at ends? (a) space-between (b) center (c) flex-end (d) flex-start
25. 25.🎨 Which tag connects an outside CSS file? (a) <css> (b) <a> (c) <img> (d) <link>
26. 26.🔍 Which is the odd one out? (a) shows a pop-up message (b) lays out the page (c) reacts to a button click (d) counts down a timer
27. 27.💪 Which flexbox property sets space between boxes? (a) gap (b) justify-content (c) align-items (d) flex-direction
28. 28.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 14px;
      }
    } (a) No (b) Yes
29. 29.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) exactly 100px (c) turned off (d) 800px or wider
30. 30.🎨 A CSS file usually ends with which extension? (a) .js (b) .css (c) .png (d) .html
31. 31.✍️ Which property is set to 8px in this rule?
    p {
      margin: 10px;
      padding: 8px;
    } (a) font-weight (b) padding (c) border (d) 8px
32. 32.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    } (a) Yes (b) No
33. 33.⚖️ What colour is the text of this element?
    <h1 class="big" id="top">Hi</h1>
    CSS:
    h1 { color: green; }
    h1 { color: white; } (a) yellow (b) green (c) purple (d) white
34. 34.🌈 Which colour is rgb(0, 0, 0)? (a) bright green (b) magenta (c) black (d) yellow
35. 35.📦 In the box model, which part is space outside the border? (a) margin (b) padding (c) border (d) content
36. 36.✍️ How does a CSS comment start? (a) /* (b) // (c) # (d) <!--
37. 37.🌈 Which colour is rgb(255, 0, 255)? (a) magenta (b) bright green (c) black (d) cyan
38. 38.⚖️ What colour is the text of this element?
    <p class="big" id="end">Hi</p>
    CSS:
    p { color: white; }
    p { color: black; } (a) black (b) green (c) white (d) blue
39. 39.✍️ Which property is set to italic in this rule?
    body {
      font-style: italic;
      font-weight: bold;
      border: 2px solid;
      margin: 10px;
    } (a) color (b) font-style (c) italic (d) font-size
40. 40.⚖️ What colour is the text of this element?
    <p class="star" id="intro">Hi</p>
    CSS:
    .star { color: black; }
    .star { color: blue; } (a) black (b) white (c) blue (d) purple

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