CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 977 · 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 CSS selector matches this element?
   <h1 class="big" id="logo">Hello</h1> (a) .big (b) .logo (c) #end (d) #big
2. 2.⚖️ What colour is the text of this element?
   <p class="star" id="end">Hi</p>
   CSS:
   p { color: orange; }
   p { color: blue; } (a) purple (b) orange (c) green (d) blue
3. 3.✍️ Which property is set to 8px in this rule?
   h1 {
     font-weight: bold;
     font-style: italic;
     padding: 8px;
     color: red;
   } (a) border (b) font-weight (c) padding (d) 8px
4. 4.📱 What does a media query check? (a) the time of day (b) the screen width (c) the page title (d) the battery level
5. 5.Which of these does CSS do? (a) lays out the page (b) makes a link (c) makes headings and lists (d) gives the page structure
6. 6.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 130px;
     justify-content: flex-end;
   }
   Inside are 3 boxes, each 40px wide (no margins).
7. 7.Which of these is margin? (a) the gap round content (b) the text or picture (c) space outside the border (d) a solid or dotted edge
8. 8.🎨 One CSS file can style how many pages? (a) no pages (b) only one word (c) only one image (d) many pages
9. 9.⚖️ What colour is the text of this element?
   <h2 class="menu" id="top">Hi</h2>
   CSS:
   h2 { color: green; }
   .menu { color: white; } (a) white (b) green (c) purple (d) red
10. 10.🌈 Hex digits go 0 to 9, then A to which letter? (a) J (b) Z (c) G (d) F
11. 11.⚖️ What colour is the text of this element?
    <h2 class="note" id="intro">Hi</h2>
    CSS:
    .note { color: black; }
    .note { color: red; } (a) red (b) purple (c) black (d) yellow
12. 12.True or false: the content is space inside the border. (a) True (b) False
13. 13.✍️ What is the selector in this CSS rule?
    .note {
      font-style: italic;
      border: 2px solid;
    } (a) 2px solid (b) .note (c) #top (d) font-style
14. 14.🎯 Which CSS selector matches this element?
    <p class="star" id="top">Hello</p> (a) .star (b) #star (c) .top (d) #intro
15. 15.Which of these is the content? (a) a solid or dotted edge (b) the text or picture (c) space outside the border (d) the line round the box
16. 16.✍️ CSS declarations go inside which brackets? (a) < > (b) ( ) (c) { } (d) [ ]
17. 17.True or false: JavaScript lays out the page. (a) True (b) False
18. 18.🧩 Which language gives the page structure? (a) HTML (b) JavaScript (c) CSS
19. 19.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 26px;
      }
    } (a) Yes (b) No
20. 20.🎨 Which tag connects an outside CSS file? (a) <img> (b) <link> (c) <css> (d) <a>
21. 21.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      text-align: center;
    }
22. 22.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) neither (c) the first one (d) the shorter one
23. 23.What does text-align do? (a) makes the text bold (b) centres a heading (c) sets the letter colour (d) colours behind the text
24. 24.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 240px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 50px wide (no margins).
25. 25.🎯 Which CSS selector matches this element?
    <p class="note" id="intro">Hello</p> (a) .big (b) h1 (c) .intro (d) p
26. 26.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 240px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 40px wide (no margins).
27. 27.🔍 Which is the odd one out? (a) checks a quiz answer (b) sets colours and fonts (c) counts down a timer (d) reacts to a button click
28. 28.🎯 What kind of selector is #end? (a) an id selector (b) an element selector (c) a class selector
29. 29.What does justify-content: center do? (a) puts boxes in the middle (b) equal gaps, none at ends (c) packs boxes at the end (d) packs boxes at the start
30. 30.⚖️ What colour is the text of this element?
    <h1 class="note" id="top">Hi</h1>
    CSS:
    #top { color: yellow; }
    #top { color: orange; } (a) yellow (b) orange (c) red (d) black
31. 31.💪 Which justify-content value puts boxes in the middle? (a) flex-end (b) flex-start (c) space-between (d) center
32. 32.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 260px;
      justify-content: center;
    }
    Inside are 2 boxes, each 100px wide (no margins).
33. 33.🖌️ Which CSS property picks the font style? (a) font-size (b) background-color (c) font-weight (d) font-family
34. 34.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 200px;
      padding: 30px;
      border: 5px solid black;
      margin: 10px;
    }
35. 35.🎯 Which element does the selector .menu style? (a) <h2 class="note"> (b) <h2 id="menu"> (c) <li class="big"> (d) <h2 class="menu">
36. 36.✍️ Which property is set to 10px in this rule?
    h1 {
      margin: 10px;
      font-size: 20px;
    } (a) padding (b) margin (c) font-weight (d) 10px
37. 37.True or false: padding is space inside the border. (a) True (b) False
38. 38.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 120px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 40px wide (no margins).
39. 39.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 50px wide (no margins).
40. 40.⚖️ What colour is the text of this element?
    <h1 class="box" id="logo">Hi</h1>
    CSS:
    h1 { color: white; }
    h1 { color: green; } (a) green (b) red (c) purple (d) white

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