MCQs Of Class 8: CSS Colors
MCQs:
1. What property is used to set the background color of an element in CSS?
o A) background-color
o B) color
o C) background
o D) fill-color
Answer: A) background-color
Explanation: The background-color property sets the background color of an element.
2. Which of the following properties is used to create a linear gradient in CSS?
o A) background-image
o B) linear-gradient
o C) background
o D) All of the above
Answer: D) All of the above
Explanation: linear-gradient is used to define a gradient, and it is applied using background-image or background.
3. What is the correct CSS syntax for a linear gradient going from red to green?
o A) background: linear-gradient(#FF0000, #00FF00);
o B) background: linear-gradient(#FF0000 to #00FF00);
o C) background: linear-gradient(#FF0000, #00FF00, 90deg);
o D) background: linear-gradient(to right, #FF5733, #33FF57);
Answer: A) background: linear-gradient(#FF0000, #00FF00);
Explanation: This syntax creates a gradient from red to green.
4. Which property in CSS is used to create a radial gradient?
o A) background
o B) background-image
o C) radial-gradient
o D) Both B and C
Answer: D) Both B and C
Explanation: background-image and radial-gradient are used to apply a radial gradient.
5. Which value is used for a circular gradient effect in the radial-gradient property?
o A) circle
o B) ellipse
o C) oval
o D) round
Answer: A) circle
Explanation: circle is used in radial-gradient to create a circular gradient.
6. What does the transition property do in CSS?
o A) Adds an animation effect
o B) Makes the background color change
o C) Specifies the duration of a property change
o D) All of the above
Answer: C) Specifies the duration of a property change
Explanation: The transition property allows you to define the speed and timing for property changes.
7. Which CSS property is used to change the color of text when hovering over a button?
o A) text-color
o B) color
o C) background-color
o D) border-color
Answer: B) color
Explanation: The color property is used to change the text color.
8. In CSS, what does the background-clip property do?
o A) Clips the background of an element to the border area
o B) Clips the background of an element to the content area
o C) Clips the background of an element to the padding area
o D) All of the above
Answer: D) All of the above
Explanation: background-clip defines which part of the element the background is applied to (content, padding, or border).
9. Which value should be used with -webkit-background-clip to apply a gradient to text?
o A) text
o B) content
o C) padding
o D) border
Answer: A) text
Explanation: -webkit-background-clip: text; clips the background to the text, allowing gradient text.
10. Which of the following is NOT a valid color keyword in CSS?
o A) red
o B) green
o C) yellow
o D) bluegreen
Answer: D) bluegreen
Explanation: bluegreen is not a valid color keyword in CSS.
11. What CSS property is used to add hover effects to buttons?
o A) :active
o B) :hover
o C) :focus
o D) :link
Answer: B) :hover
Explanation: The :hover pseudo-class is used to define styles when the user hovers over an element.
12. Which value for the background property creates a gradient from top to bottom?
o A) linear-gradient(to right, red, green)
o B) linear-gradient(to top, red, green)
o C) linear-gradient(red, green)
o D) linear-gradient(to bottom, red, green)
Answer: D) linear-gradient(to bottom, red, green)
Explanation: linear-gradient(to bottom, red, green) creates a gradient from top to bottom.
13. Which of the following is the correct syntax to create a transition effect for background color?
o A) transition: background-color 1s ease;
o B) transition: color 1s ease;
o C) transition: background-color;
o D) transition: all;
Answer: A) transition: background-color 1s ease;
Explanation: The correct syntax specifies the property to transition, its duration, and the timing function.
14. Which CSS rule is used to ensure sufficient contrast for accessibility in terms of color?
o A) color-contrast
o B) color
o C) background-color
o D) font-weight
Answer: B) color
Explanation: The color property is important to ensure proper contrast between text and background for readability.
15. What value for background-clip will make the background visible only within the text itself?
o A) text
o B) content
o C) padding
o D) border
Answer: A) text
Explanation: The value text clips the background to the text, allowing gradient text effects.
16. What property do you use to make the background of a webpage transparent?
o A) background-color: transparent;
o B) opacity: 0;
o C) visibility: hidden;
o D) color: transparent;
Answer: A) background-color: transparent;
Explanation: background-color: transparent; makes the background transparent, but keeps other content visible.
17. Which CSS property would you use to adjust the font size of a header?
o A) font-style
o B) font-family
o C) font-size
o D) font-weight
Answer: C) font-size
Explanation: The font-size property is used to change the size of text.
18. Which color combination provides the best accessibility contrast?
o A) Yellow on blue
o B) Black on white
o C) Red on green
o D) White on grey
Answer: B) Black on white
Explanation: Black on white offers the highest contrast and is the most accessible color combination.
19. What does the border-radius property do in CSS?
o A) It defines the corners of the element.
o B) It changes the background color.
o C) It adds spacing inside the element.
o D) It adjusts the font size.
Answer: A) It defines the corners of the element.
Explanation: The border-radius property rounds the corners of an element.
20. Which of the following is used to apply a background image to a page in CSS?
o A) background-image
o B) background-color
o C) color
o D) background
Answer: A) background-image
Explanation: The background-image property is used to apply an image as a background to an element.
21. Which property is used to define the amount of space between elements in CSS?
o A) padding
o B) margin
o C) spacing
o D) border
Answer: B) margin
Explanation: The margin property is used to define the space around elements.
22. Which syntax is correct for setting a gradient from top left to bottom right?
o A) background: linear-gradient(top left, red, blue);
o B) background: linear-gradient(45deg, red, blue);
o C) background: linear-gradient(left to right, red, blue);
o D) background: linear-gradient(top, left, red, blue);
Answer: B) background: linear-gradient(45deg, red, blue);
Explanation: The correct syntax uses the degree value to define the direction of the gradient.
23. How do you apply a transition effect when hovering over an element?
o A) hover: transition all 0.3s ease;
o B) transition: all 0.3s ease;
o C) hover: all 0.3s ease;
o D) transition-all: 0.3s ease;
Answer: B) transition: all 0.3s ease;
Explanation: The transition property is used to specify the transition effect when a property changes.
24. What does the opacity property do in CSS?
o A) Controls the transparency of an element
o B) Sets the background color of an element
o C) Changes the border width
o D) Adjusts the font size of the text
Answer: A) Controls the transparency of an element
Explanation: The opacity property sets the transparency level of an element.
25. Which value is used for a background image to repeat horizontally and vertically?
o A) no-repeat
o B) repeat-x
o C) repeat-y
o D) repeat
Answer: D) repeat
Explanation: repeat makes the background image repeat both horizontally and vertically.
26. Which method is used to define text shadow in CSS?
o A) text-shadow
o B) box-shadow
o C) background-shadow
o D) shadow
Answer: A) text-shadow
Explanation: The text-shadow property is used to apply shadows to text.
27. Which CSS value is used to set the opacity of an element?
o A) color
o B) opacity
o C) visibility
o D) background
Answer: B) opacity
Explanation: The opacity property is used to control the transparency of an element.
28. How would you apply a hover effect to change the background color of a button?
o A) button:hover { background-color: blue; }
o B) button:active { background-color: blue; }
o C) button:focus { background-color: blue; }
o D) button:hover { color: blue; }
Answer: A) button:hover { background-color: blue; }
Explanation: The :hover pseudo-class is used to apply styles when the button is hovered over.
29. What is the default value for the background-color property?
o A) transparent
o B) none
o C) white
o D) black
Answer: A) transparent
Explanation: The default background color is transparent.
30. Which property allows you to specify a fixed background image that does not move when scrolling?
o A) background-position
o B) background-repeat
o C) background-attachment
o D) background-origin
Answer: C) background-attachment
Explanation: background-attachment: fixed; keeps the background image fixed during scrolling.
31. Which of the following is an example of an invalid CSS color value?
o A) #FFFFFF
o B) rgb(255, 0, 0)
o C) blue
o D) 1, 1, 1
Answer: D) 1, 1, 1
Explanation: The value 1, 1, 1 is not a valid CSS color format. It must be in hexadecimal, RGB, or named format.
32. Which of the following is the correct CSS for setting the background image to an external URL?
o A) background: url("image.jpg");
o B) background-image: image.jpg;
o C) background-image: "image.jpg";
o D) background: "image.jpg";
Answer: A) background: url("image.jpg");
Explanation: The correct syntax is background: url("image.jpg"); to apply an image as the background.
33. What property is used to define the text color in CSS?
o A) font-color
o B) color
o C) text-color
o D) background-color
Answer: B) color
Explanation: The color property defines the text color.
34. What is the purpose of the z-index property in CSS?
o A) Adjust the visibility of an element
o B) Determine the stack order of elements
o C) Change the position of an element
o D) Set the font size of text
Answer: B) Determine the stack order of elements
Explanation: The z-index property controls the stacking order of elements.
35. What is the effect of background-size: cover?
o A) It scales the background image to fit the element.
o B) It makes the background image repeat.
o C) It ensures the background image covers the element fully, cropping it if necessary.
o D) It centers the background image.
Answer: C) It ensures the background image covers the element fully, cropping it if necessary.
Explanation: background-size: cover; ensures the image covers the entire element's background.
36. How do you apply a box shadow to an element in CSS?
o A) box-shadow: 0px 0px 10px black;
o B) shadow: 0px 0px 10px black;
o C) box: 0px 0px 10px black;
o D) background-shadow: 0px 0px 10px black;
Answer: A) box-shadow: 0px 0px 10px black;
Explanation: The box-shadow property is used to apply a shadow effect to an element.
37. What is the default background color for most web pages in CSS?
o A) black
o B) white
o C) transparent
o D) gray
Answer: B) white
Explanation: The default background color for web pages is white.
38. How do you remove the underline from a link in CSS?
o A) text-decoration: none;
o B) link-decoration: none;
o C) text-shadow: none;
o D) border: none;
Answer: A) text-decoration: none;
Explanation: The text-decoration property removes the underline from links.
39. What does the background-position property do?
o A) Defines the position of the text
o B) Specifies the position of the background image
o C) Sets the size of the background image
o D) Sets the opacity of the background image
Answer: B) Specifies the position of the background image
Explanation: The background-position property sets the starting position of the background image.
40. What does the filter property do in CSS?
o A) Adds special effects to an element
o B) Changes the color of an element
o C) Sets the background color of an element
o D) Sets the size of an element
Answer: A) Adds special effects to an element
Explanation: The filter property is used to apply graphical effects such as blur, brightness, contrast, etc., to an element.
41. Which value of background-repeat is used to make the background image repeat vertically?
o A) no-repeat
o B) repeat-x
o C) repeat-y
o D) repeat
Answer: C) repeat-y
Explanation: repeat-y makes the background image repeat vertically.
42. What property is used to create a blur effect on an image?
o A) blur
o B) background-filter
o C) filter: blur(5px);
o D) image-blur
Answer: C) filter: blur(5px);
Explanation: filter: blur(5px) applies a blur effect to an element.
43. Which of the following is a valid gradient direction in CSS?
o A) left-to-right
o B) top-to-bottom
o C) 45deg
o D) diagonal
Answer: C) 45deg
Explanation: Gradients can be defined using angles like 45deg.
44. How do you change the color of text when hovering over a link in CSS?
o A) a:hover { color: blue; }
o B) a:hover { text-color: blue; }
o C) a:hover { font-color: blue; }
o D) a:hover { background-color: blue; }
Answer: A) a:hover { color: blue; }
Explanation: The :hover pseudo-class is used to change the color of a link when hovered over.
45. Which property is used to add space between the content and the border of an element?
o A) margin
o B) padding
o C) border-spacing
o D) space
Answer: B) padding
Explanation: The padding property creates space between the content and the element's border.
46. Which CSS property is used to specify the space between letters in text?
o A) letter-spacing
o B) word-spacing
o C) line-height
o D) text-spacing
Answer: A) letter-spacing
Explanation: The letter-spacing property defines the spacing between characters in text.
47. How do you make text bold in CSS?
o A) font-weight: bold;
o B) text-weight: bold;
o C) font-style: bold;
o D) text-style: bold;
Answer: A) font-weight: bold;
Explanation: The font-weight property is used to set the weight of the font (e.g., bold).
48. What is the effect of background-size: contain?
o A) The background image will be scaled to maintain its aspect ratio and fit the container.
o B) The background image will be stretched to fill the entire container.
o C) The background image will be positioned at the top left of the element.
o D) The background image will be fixed and not move with scrolling.
Answer: A) The background image will be scaled to maintain its aspect ratio and fit the container.
Explanation: background-size: contain ensures the background image fits the element while maintaining its aspect ratio.
49. What is the purpose of background-origin in CSS?
o A) Sets the size of the background image
o B) Specifies the origin of the background image
o C) Determines if the background image repeats
o D) Controls the opacity of the background image
Answer: B) Specifies the origin of the background image
Explanation: The background-origin property sets the positioning area for the background image.
50. Which value is used to prevent a background image from repeating in both directions?
o A) repeat-x
o B) repeat-y
o C) no-repeat
o D) repeat
Answer: C) no-repeat
Explanation: no-repeat prevents the background image from repeating in both directions.
No comments:
Post a Comment