CSS MCQ
1. What does CSS stand for?
a) Creative Style Sheet
b) Computer Style Sheet
c) Colorful Style Sheet
d) Cascading Style Sheet
Answer: d
2. Which HTML tag is used to link an external CSS file to an HTML document?
a) <style>
b) <link>
c) <css>
d) <external>
Answer: b
3. What is the correct syntax to select an HTML element with the id "header" in CSS?
a) #header
b) .header
c) element#header
d) .header#
Answer: a
4. Which property is used to change the font of an element in CSS?
a) font-family
b) font-style
c) font-size
d) text-font
Answer: a
5. Which CSS property is used to control the spacing between lines of text?
a) line-spacing
b) text-spacing
c) line-height
d) spacing
Answer: c
6. How can you apply a border to an element using CSS?
a) border: 1px solid black;
b) element-border: 1px solid black;
c) border-style: solid;
d) style.border: 1px black;
Answer: a
7. What does the "Cascading" in CSS refer to?
a) The process of blending colors
b) The way browsers render styles
c) The ability to override styles from different sources
d) The use of cascading waterfalls in design
Answer: c
8. Which CSS property is used to control the spacing between individual characters?
a) text-spacing
b) character-spacing
c) letter-spacing
d) space-between
Answer: c
9. How can you center an element horizontally in CSS?
a) align: center;
b) text-align: center;
c) horizontal-align: center;
d) margin: auto;
Answer: b
10. Which CSS selector targets elements that are children of a specific element?
a) >
b) :
c) ~
d) +
Answer: a
11. Which CSS property is used to control the color of text?
a) color
b) text-color
c) font-color
d) style.color
Answer: a
12. What is the purpose of the CSS property "float"?
a) To create a floating element on the page
b) To move an element to the right
c) To control the transparency of an element
d) To control the alignment of an element
Answer: a
13. Which CSS property is used to control the size of an element's margin?
a) margin-size
b) padding
c) space
d) margin
Answer: d
14. Which CSS property is used to control the size of an element's padding?
a) padding-size
b) margin
c) space
d) padding
Answer: d
15. Which CSS property is used to control the display behavior of an element?
a) display-mode
b) visibility
c) display
d) show
Answer: c
16. What is the purpose of the CSS property "position"?
a) To change the color of an element
b) To control the position of an element on the page
c) To add animation effects to an element
d) To define the size of an element
Answer: b
17. Which CSS value is used to make an element transparent?
a) solid
b) opaque
c) transparent
d) visibility: hidden;
Answer: c
18. How can you select all paragraphs with the class "intro" in CSS?
a) .intro
b) intro
c) #intro
d) p.intro
Answer: d
19. What does the "box model" in CSS refer to?
a) A design concept for creating visually appealing boxes
b) The way browsers render elements on a web page
c) The combination of margin, border, padding, and content of an element
d) A model used for creating 3D animations
Answer: c
20. Which CSS property is used to control the background color of an element?
a) background-color
b) bgcolor
c) color-background
d) style.background-color
Answer: a
21. How can you apply a background image to an element in CSS?
a) image: url('image.jpg');
b) background-img: url('image.jpg');
c) background-image: url('image.jpg');
d) img: background('image.jpg');
Answer: c
22. What is the purpose of the CSS property "overflow"?
a) To control the rotation of an element
b) To hide the overflow of content from an element
c) To create a shadow effect
d) To control the transparency of an element
Answer: b
23. Which CSS property is used to control the order of flexible items in a flex container?
a) order
b) flex-order
c) flex-ordering
d) item-order
Answer: a
24. How can you change the text color of a link that has been visited?
a) a:visited { color: red; }
b) a.visited { color: red; }
c) a.link-visited { color: red; }
d) a.color-red { visited: true; }
Answer: a
25. Which CSS property is used to control the spacing between columns of a multi-column layout?
a) column-gap
b) gap
c) column-spacing
d) space-between-columns
Answer: a
26. What is the purpose of the CSS property "transform"?
a) To create a transition effect between two states of an element
b) To move an element to a new position
c) To apply 3D transformations to an element
d) To change the font style of an element
Answer: c
27. How can you select all elements of the class "highlight" that are descendants of a <div> element with
the id "container"?
a) #container .highlight
b) .highlight #container
c) div.highlight
d) #container > .highlight
Answer: a
28. Which CSS property is used to control the order of layers in a 3D space?
a) layer-order
b) z-index
c) depth
d) order
Answer: b
29. How can you apply different styles to different media types using CSS?
a) Using the @style rule
b) Using the @media rule
c) Using the @type rule
) Using the media-type attribute
Answer: b
30. What is the purpose of the CSS property "transition"?
a) To control the timing of animations
b) To change an element's position
c) To create a gradient background
d) To adjust the spacing between elements
Answer: a
31. Which CSS property is used to control the shape of the corners of an element?
a) corner-radius
b) border-curve
c) border-radius
d) corner-shape
Answer: c
32. What is the purpose of the CSS property "opacity"?
a) To change the background color of an element
b) To control the visibility of an element
c) To create a drop shadow effect
d) To control the transparency of an element
Answer: d
33. How can you apply different styles to different states of a button, such as hover and active?
a) button:hover { }
b) button.active { }
c) button[state="hover"] { }
d) button[state="active"] { }
Answer: a
34. Which CSS property is used to control the alignment of text within an element?
a) text-align
b) alignment
c) align
d) text-alignment
Answer: a
35. How can you create a smooth transition effect between two CSS property values?
a) smooth-transition: property value;
b) property-transition: smooth value;
c) transition: property value smooth;
d) transition: property duration timing-function;
Answer: d
36. What is the purpose of the CSS property "box-shadow"?
a) To create a border around an element
b) To control the shadow of an element
c) To create a gradient background
d) To control the margin of an element
Answer: b
37. Which CSS property is used to control the width of an element's border?
a) border-width
b) border-size
c) width-border
d) border-line
Answer: a
38. How can you apply a style to an element when a user hovers over it?
a) element:hover { }
b) element.hover { }
c) element:active { }
d) element:focus { }
Answer: a
39. Which CSS property is used to control the space between columns in a multi-column layout?
a) column-space
b) column-gap
c) column-margin
d) gap
Answer: b
40. What is the purpose of the CSS property "text-transform"?
a) To control the spacing between characters
b) To transform text into a different font
c) To control the visibility of text
d) To change the capitalization of text
Answer: d
41. How can you select the first child element of a parent element in CSS?
a) parent:first-child { }
b) parent:first { }
c) parent > child:first { }
d) parent > child:first-child { }
Answer: d
42. Which CSS property is used to control the amount of space between an element's content and its
border?
a) spacing
b) padding
c) margin
d) gap
Answer: b
43. What is the purpose of the CSS property "text-decoration"?
a) To change the font style of text
b) To add a border around text
c) To control the spacing between characters
d) To add visual effects to text, like underline or strike-through
Answer: d
44. How can you create a responsive design using CSS?
a) Using the @viewport rule
b) Using the @responsive rule
c) Using media queries
d) Using the viewport-size property
Answer: c
45. Which CSS property is used to control the size of an element's text?
a) text-size
b) font-size
c) size
d) text-font
Answer: b
46. What is the purpose of the CSS property "display: none;"?
a) To make an element invisible
b) To create a hidden background image
c) To display an element as a block
d) To create a hidden border
Answer: a
47. How can you apply a background color to an element in CSS?
a) background-color: color;
b) element-bg: color;
c) bg-color: color;
d) color-background: color;
Answer: a
48. Which CSS property is used to control the alignment of flex items along the cross-axis?
a) flex-align
b) cross-align
c) justify-content
d) align-items
Answer: d
49. What is the purpose of the CSS property "clear"?
a) To control the alignment of an element
b) To clear the contents of an element
c) To create a line break
d) To control the positioning of an element in relation to floated elements
Answer: d
50. How can you apply a style to all elements with the class "important" inside a <div> element?
a) div.important { }
b) div > .important { }
c) .important div { }
d) div .important { }
Answer: d
