Test Your CSS Knowledge with Our Quiz

by

Quiz CSS

CSS (Cascading Style Sheets) is an essential technology for web developers and designers. It allows you to control the presentation and layout of your web pages. Whether you’re a beginner or an experienced coder, it’s always a good idea to brush up on your CSS skills. That’s why we’ve prepared a CSS quiz to test your knowledge and help you learn more about this powerful styling language.

CSS Basics

1. What does CSS stand for?

  • a) Computer Style Sheets
  • b) Cascading Style Sheets
  • c) Creative Style Sheets
  • d) Colorful Style Sheets

Answer: b) Cascading Style Sheets

CSS stands for Cascading Style Sheets, and it’s used to define the style and layout of web pages.

2. Which HTML tag is used to define an internal style sheet?

  • a) <style>
  • b) <css>
  • c) <stylesheet>
  • d) <internal-css>

Answer: a) <style>

The <style> tag is used to define an internal style sheet within an HTML document.

3. How do you select an element with the id “demo” in CSS?

  • a) #demo
  • b) .demo
  • c) demo
  • d) @demo

Answer: a) #demo

To select an element with the id “demo” in CSS, you use the # symbol followed by the id name: #demo.

4. How do you select elements with the class name “example”?

  • a) #example
  • b) .example
  • c) example
  • d) @example

Answer: b) .example

To select elements with the class name “example” in CSS, you use the . symbol followed by the class name: .example.

5. How do you make each word in a text start with a capital letter?

  • a) text-transform: capitalize;
  • b) text-decoration: uppercase;
  • c) text-style: uppercase;
  • d) text-format: capitalize;

Answer: a) text-transform: capitalize;

You can make each word in a text start with a capital letter by using the CSS property text-transform with the value “capitalize.”

6. Which property is used to change the background color?

  • a) background-color
  • b) color
  • c) font-color
  • d) background

Answer: a) background-color

The property background-color is used to change the background color of an element.

7. Which property is used to change the font of an element?

  • a) font-family
  • b) font-style
  • c) text-font
  • d) font-source

Answer: a) font-family

The property font-family is used to change the font of an element.

8. How do you make a list that lists its items with squares?

  • a) list-style-type: circle;
  • b) list-style-type: square;
  • c) list-style-type: disc;
  • d) list-style-type: square-bullet;

Answer: b) list-style-type: square;

To make a list that lists its items with squares, you use the CSS property list-style-type with the value “square.”

9. How do you select all <p> elements inside a <div> element?

  • a) div p
  • b) p div
  • c) div > p
  • d) p < div

Answer: a) div p

You can select all <p> elements inside a <div> element by using the “div p” selector.

10. What does the following CSS code do?

p { color: red; font-size: 16px; }

Answer: The CSS code sets the text color of all <p> elements to red and sets their font size to 16 pixels.

Text Styling and Formatting

11. Which CSS property controls the text size?

  • a) text-style
  • b) font-size
  • c) text-font
  • d) font-style

Answer: b) font-size

The CSS property font-size is used to control the text size.

12. How do you display hyperlinks without an underline?

  • a) text-decoration: none;
  • b) link-decoration: none;
  • c) hyperlink-style: none;
  • d) underline: none;

Answer: a) text-decoration: none;

To display hyperlinks without an underline, you use the CSS property text-decoration with the value “none.”

13. Which property is used to change the left margin of an element?

  • a) margin-left
  • b) padding-left
  • c) margin-right
  • d) padding-right

Answer: a) margin-left

The property margin-left is used to change the left margin of an element.

14. How do you make text bold?

  • a) text-weight: bold;
  • b) font-style: bold;
  • c) font-weight: bold;
  • d) text-format: bold;

Answer: c) font-weight: bold;

You can make text bold by using the CSS property font-weight with the value “bold.”

15. Which CSS property is used to set the spacing between words?

  • a) word-spacing
  • b) letter-spacing
  • c) text-spacing
  • d) space-spacing

Answer: a) word-spacing

The CSS property word-spacing is used to set the spacing between words in text.

16. What is the correct CSS syntax to change the font name?

  • a) font-family: Arial, Helvetica, sans-serif;
  • b) font-type: Arial, Helvetica, sans-serif;
  • c) text-font: Arial, Helvetica, sans-serif;
  • d) font-name: Arial, Helvetica, sans-serif;

Answer: a) font-family: Arial, Helvetica, sans-serif;

The correct CSS syntax to change the font name is using the font-family property.

17. How do you make a border visible on all sides of a box?

  • a) border: 1px solid black;
  • b) border: 1px visible black;
  • c) border: 1px all black;
  • d) border: 1px box black;

Answer: a) border: 1px solid black;

To make a border visible on all sides of a box, you use the border property with the value “1px solid black.”

18. Which property is used to change the font color of an element?

  • a) text-color
  • b) font-color
  • c) color
  • d) font-style

Answer: c) color

The property color is used to change the font color of an element.

19. What is the default value of the position property?

  • a) absolute
  • b) static
  • c) relative
  • d) fixed

Answer: b) static

The default value of the position property is “static.”

20. How can you create a circle shape in CSS?

  • a) Use the border-radius property with a value of 50%.
  • b) Use the shape: circle; property.
  • c) Use the circle-shape property.
  • d) Use the border: circle; property.

Answer: a) Use the border-radius property with a value of 50%.

To create a circle shape in CSS, you use the border-radius property with a value of 50%.

Quick-CSS-QuizDownload