CSS Quiz - Multiple Choice Questions

1. What does CSS stand for?

a) Creative Style Sheets

b) Computer Style Sheets

c) Cascading Style Sheets

d) Colorful Style Sheets

Answer:

c) Cascading Style Sheets

Explanation:

CSS stands for Cascading Style Sheets. It is used to style and layout web pages—for example, to alter the font, color, size, and spacing of your content.

2. Which property is used to change the background color of an element?

a) color

b) bgcolor

c) background-color

d) background

Answer:

c) background-color

Explanation:

The background-color property is used in CSS to define the background color of an element.

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

a) demo

b) .demo

c) #demo

d) *demo

Answer:

c) #demo

Explanation:

In CSS, an id is selected using the hash symbol (#) followed by the id's name. So #demo selects the element with the id "demo".

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

a) font-weight

b) font-style

c) font-family

d) font-size

Answer:

c) font-family

Explanation:

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

5. How do you apply a style for all <h1> elements?

a) all.h1 { … }

b) h1 { … }

c) #h1 { … }

d) .h1 { … }

Answer:

b) h1 { … }

Explanation:

In CSS, if you want to apply a style to all elements of a specific type (like all <h1> elements), you simply use the type selector, which is just the name of the element type.

6. Which CSS property controls the text size?

a) font-size

b) text-style

c) text-size

d) font-weight

Answer:

a) font-size

Explanation:

The font-size property in CSS is used to control the text size of an element.

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

a) absolute

b) fixed

c) relative

d) static

Answer:

d) static

Explanation:

The default value of the position property in CSS is static.

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

a) margin-left

b) padding-left

c) indent

d) border-left

Answer:

a) margin-left

Explanation:

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

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

a) text-transform: capitalize;

b) text-style: capitalize;

c) font-style: capitalize;

d) text-capitalize: true;

Answer:

a) text-transform: capitalize;

Explanation:

The text-transform: capitalize; property in CSS is used to make the first letter of each word in the text capitalized.

10. What does the 'z-index' property do?

a) Changes the opacity of an element

b) Alters the layout of elements in a grid

c) Stacks elements in a specified order

d) Adjusts the zoom level of elements

Answer:

c) Stacks elements in a specified order

Explanation:

The z-index property in CSS controls the vertical stacking order of elements that overlap each other.

11. Which property is used to create space between the element's border and inner content?

a) margin

b) padding

c) border

d) spacing

Answer:

b) padding

Explanation:

The padding property in CSS is used to create space between the element's border and its inner content.

12. What is the purpose of the CSS display property?

a) To change the font style of text

b) To hide or show elements without deleting them from the document

c) To control the layout of an element

d) To manipulate the color of an element

Answer:

c) To control the layout of an element

Explanation:

The display property in CSS is used to control the layout of an element, such as making it block-level or inline.

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

a) div + p {}

b) div p {}

c) div.p {}

d) p > div {}

Answer:

b) div p {}

Explanation:

The div p {} selector is used to select all <p> elements that are inside a <div> element.

14. Which CSS property is used to control the visibility of an element?

a) display

b) visibility

c) opacity

d) view

Answer:

b) visibility

Explanation:

The visibility property in CSS is used to control the visibility of an element, allowing it to be hidden without removing it from the document flow.

15. Which CSS property sets the stacking order of elements?

a) order

b) stack-index

c) z-index

d) layer

Answer:

c) z-index

Explanation:

The z-index property in CSS sets the stacking order of positioned elements. Elements with a higher z-index cover those with a lower one.

16. What is the function of the CSS overflow property?

a) To add scrollbars to an element when its content is too large to fit in the specified area

b) To specify what should happen with content that is too large for the box

c) Both a) and b)

d) To prevent content from spilling outside the element

Answer:

c) Both a) and b)

Explanation:

The overflow property in CSS specifies how to handle content that's too big for its container. It can add scrollbars or clip the overflow content.

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

a) color

b) font-color

c) text-color

d) font-style

Answer:

a) color

Explanation:

The color property in CSS is used to set the color of the text inside an element.

18. How do you apply a CSS style for only one specific element with the id "unique"?

a) #unique { … }

b) .unique { … }

c) unique { … }

d) *unique { … }

Answer:

a) #unique { … }

Explanation:

In CSS, an element with a specific id is selected using a hash symbol (#) followed by the id. So #unique will select and apply styles to the element with the id "unique".

19. What is the correct syntax for making all the <div> elements bold in CSS?

a) div { font-weight: bold; }

b) div { text-style: bold; }

c) divs { font: bold; }

d) all.div { font-weight: bold; }

Answer:

a) div { font-weight: bold; }

Explanation:

The correct syntax to make all <div> elements bold in CSS is div { font-weight: bold; }. The font-weight property sets the weight or boldness of the font.

20. Which CSS property is used to set the spacing between lines of text?

a) text-spacing

b) line-height

c) letter-spacing

d) text-line

Answer:

b) line-height

Explanation:

The line-height property in CSS is used to specify the space between lines of text.

21. What does the display: none; property do in CSS?

a) It hides an element without removing the space it occupies

b) It hides an element and removes the space it occupies

c) It makes an element invisible but still affects layout

d) It removes an element from the document flow

Answer:

b) It hides an element and removes the space it occupies

Explanation:

The display: none; property in CSS hides an element, and it does not take up any space. It is as though the element does not exist in the document layout.

22. How do you select elements with a specific class in CSS?

a) #classname

b) .classname

c) classname

d) *classname

Answer:

b) .classname

Explanation:

In CSS, elements with a specific class are selected using a period (.) followed by the class name.

23. Which property is used in CSS to change the cursor type when hovering over an element?

a) cursor

b) pointer

c) hover

d) cursor-type

Answer:

a) cursor

Explanation:

The cursor property in CSS is used to change the cursor's appearance when it's over an element.

24. What is the purpose of the float property in CSS?

a) To change the font of text

b) To position and format content to the left or right side of a container, allowing text and inline elements to wrap around it

c) To add special effects to text

d) To make elements transparent

Answer:

b) To position and format content to the left or right side of a container, allowing text and inline elements to wrap around it

Explanation:

The float property in CSS is used to place an element on the left or right side of its container, allowing text and other inline elements to wrap around it.

25. Which CSS property is used for specifying the area outside the border of an element?

a) padding

b) margin

c) border

d) external

Answer:

b) margin

Explanation:

The margin property in CSS is used to create space around elements, outside of any defined borders.

26. How do you select all p elements inside a div element, where the p is the direct child of div?

a) div p {}

b) div > p {}

c) div + p {}

d) div ~ p {}

Answer:

b) div > p {}

Explanation:

The div > p {} selector is used to select all p elements where the p is the direct child of a div.

27. Which CSS property is used to make the text bold?

a) font-weight

b) font-style

c) font-bold

d) text-style

Answer:

a) font-weight

Explanation:

The font-weight property in CSS is used to make the text bold. The value 'bold' is commonly used.

28. What is the correct CSS syntax for making all the <span> elements bold?

a) <span style="font-size:bold;">

b) span {font-weight:bold;}

c) <span style="text-size:bold;">

d) span {text-weight:bold;}

Answer:

b) span {font-weight:bold;}

Explanation:

The correct CSS syntax to make all <span> elements bold is span {font-weight:bold;}.

29. Which CSS property is used to specify the transparency of an element?

a) opacity

b) visibility

c) transparent

d) clear

Answer:

a) opacity

Explanation:

The opacity property in CSS is used to specify the transparency of an element.

30. Which CSS property is used for specifying the area outside the border of an element?

a) padding

b) margin

c) border

d) external

Answer:

b) margin

Explanation:

The margin property in CSS is used to create space around elements, outside of any defined borders.

31. How do you select all p elements inside a div element, where the p is the direct child of div?

a) div p {}

b) div > p {}

c) div + p {}

d) div ~ p {}

Answer:

b) div > p {}

Explanation:

The div > p {} selector is used to select all p elements where the p is the direct child of a div.

32. Which CSS property is used to make the text bold?

a) font-weight

b) font-style

c) font-bold

d) text-style

Answer:

a) font-weight

Explanation:

The font-weight property in CSS is used to make the text bold. The value 'bold' is commonly used.

33. What is the correct CSS syntax for making all the <span> elements bold?

a) <span style="font-size:bold;">

b) span {font-weight:bold;}

c) <span style="text-size:bold;">

d) span {text-weight:bold;}

Answer:

b) span {font-weight:bold;}

Explanation:

The correct CSS syntax to make all <span> elements bold is span {font-weight:bold;}.

34. Which CSS property is used to specify the transparency of an element?

a) opacity

b) visibility

c) transparent

d) clear

Answer:

a) opacity

Explanation:

The opacity property in CSS is used to specify the transparency of an element.

35. What is the purpose of the border-collapse property in CSS?

a) To set whether the borders of adjacent table cells are collapsed into a single border

b) To change the border color of an element

c) To set the thickness of the border

d) To animate the border

Answer:

a) To set whether the borders of adjacent table cells are collapsed into a single border

Explanation:

The border-collapse property in CSS is used in table formatting. It sets whether the table borders are collapsed into a single border or detached as in standard HTML.

36. Which CSS property is used to change the text color of an element?

a) font-color

b) text-color

c) color

d) background-color

Answer:

c) color

Explanation:

The color property in CSS is used to set the color of the text content of an element.

37. How do you display hyperlinks without an underline?

a) a {text-decoration: none;}

b) a {underline: none;}

c) a {decoration: no-underline;}

d) a {no-underline: true;}

Answer:

a) a {text-decoration: none;}

Explanation:

The text-decoration: none; property in CSS is used to remove the underline from hyperlinks.

38. What is the default position value in CSS?

a) absolute

b) fixed

c) relative

d) static

Answer:

d) static

Explanation:

The default value for the position property in CSS is static. Elements with position: static; are not affected by the top, bottom, left, and right properties.

39. Which CSS property controls the text alignment?

a) text-align

b) font-align

c) align

d) text-direction

Answer:

a) text-align

Explanation:

The text-align property in CSS is used to control the horizontal alignment of text in an element.