CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 704 · 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 does CSS stand for? (a) Creative Sheet System (b) Computer Style Sheets (c) Cascading Style Sheets (d) Colourful Site Styles
2. 2.Which of these does HTML do? (a) lays out the page (b) reacts to a button click (c) makes headings and lists (d) adds space around boxes
3. 3.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) exactly 1000px (c) 600px or narrower (d) turned off
4. 4.✍️ Which property is set to 8px in this rule?
   h2 {
     font-size: 20px;
     font-style: italic;
     font-weight: bold;
     padding: 8px;
   } (a) font-weight (b) padding (c) border (d) 8px
5. 5.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 180px;
     justify-content: flex-start;
   }
   Inside are 4 boxes, each 40px wide (no margins).
6. 6.✍️ What value is given to text-align in this rule?
   h1 {
     font-size: 20px;
     text-align: center;
   } (a) center (b) text-align (c) yellow (d) 10px
7. 7.✍️ Which property is set to bold in this rule?
   #top {
     font-weight: bold;
     font-size: 20px;
     margin: 10px;
   } (a) bold (b) border (c) width (d) font-weight
8. 8.🧩 Which language changes the text size? (a) HTML (b) JavaScript (c) CSS
9. 9.✍️ Which sign ends each CSS declaration? (a) . (b) , (c) : (d) ;
10. 10.🧩 Which language makes headings and lists? (a) JavaScript (b) CSS (c) HTML
11. 11.Which of these does CSS do? (a) sets colours and fonts (b) makes headings and lists (c) changes the page live (d) reacts to a button click
12. 12.⚖️ What colour is the text of this element?
    <h1 class="star" id="hero">Hi</h1>
    CSS:
    h1 { color: green; }
    #hero { color: blue; }
    .star { color: black; } (a) green (b) blue (c) black (d) purple
13. 13.True or false: li is a class selector. (a) False (b) True
14. 14.True or false: p is an element selector. (a) True (b) False
15. 15.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) blue (c) green (d) black
16. 16.🖌️ Where does the text sit on its line?
    h2 {
      color: red;
      font-size: 28px;
      text-align: left;
      background-color: yellow;
    } (a) in the middle (b) on the left (c) on the right
17. 17.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 110px;
      padding: 15px;
      border: 2px solid black;
      margin: 0px;
    }
18. 18.⚖️ What colour is the text of this element?
    <p class="menu" id="logo">Hi</p>
    CSS:
    p { color: orange; }
    p { color: blue; } (a) blue (b) black (c) yellow (d) orange
19. 19.🧩 Which language lays out the page? (a) HTML (b) JavaScript (c) CSS
20. 20.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      font-style: italic;
      text-align: center;
      font-size: 20px;
    }
21. 21.🔍 Which is the odd one out? (a) counts down a timer (b) adds space around boxes (c) shows a pop-up message (d) changes the page live
22. 22.🎯 What kind of selector is .star? (a) an element selector (b) an id selector (c) a class selector
23. 23.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
24. 24.Which of these is the content? (a) space outside the border (b) the gap to other boxes (c) the text or picture (d) space inside the border
25. 25.🎨 Which attribute adds CSS inside one tag? (a) src (b) alt (c) style (d) href
26. 26.🎯 Which element does the selector .big style? (a) <li class="big"> (b) <li class="red"> (c) <li id="big"> (d) <div class="box">
27. 27.💪 Which flexbox property lines boxes up across? (a) justify-content (b) flex-direction (c) display: flex (d) align-items
28. 28.✍️ Which sign goes between a property and its value? (a) = (b) - (c) ; (d) :
29. 29.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 280px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 80px wide (no margins).
30. 30.🎯 Which sign starts a class selector? (a) # (b) . (c) & (d) @
31. 31.🎨 One CSS file can style how many pages? (a) only one image (b) only one word (c) many pages (d) no pages
32. 32.🧩 Which language rounds box corners? (a) HTML (b) CSS (c) JavaScript
33. 33.📱 What does a media query check? (a) the battery level (b) the time of day (c) the page title (d) the screen width
34. 34.🌈 Which hex code is red? (a) #00ff00 (b) #00ffff (c) #000000 (d) #ff0000
35. 35.✍️ In color: blue; which part is the property? (a) ; (b) color (c) : (d) blue
36. 36.🎯 What kind of selector is .card? (a) an element selector (b) a class selector (c) an id selector
37. 37.🌈 Which colour is rgb(0, 255, 255)? (a) white (b) black (c) red (d) cyan
38. 38.🧩 Which language shows a pop-up message? (a) HTML (b) JavaScript (c) CSS
39. 39.What does justify-content: space-between do? (a) equal gaps, none at ends (b) packs boxes at the end (c) packs boxes at the start (d) puts boxes in the middle
40. 40.⚖️ What colour is the text of this element?
    <h2 class="menu" id="intro">Hi</h2>
    CSS:
    h2 { color: red; }
    h2 { color: blue; } (a) red (b) purple (c) blue (d) black

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