All questions of CSS Basics - 5 for Class 6 Exam

Understanding the Saturation Effect
The saturation effect in CSS is primarily used to adjust the vividness of colors in an element. This adjustment can make colors appear more intense or muted, enhancing the overall visual appeal of a webpage.
Key Function: saturate()
- The correct function to apply saturation effects is saturate().
- This function is part of the CSS `filter` property, which allows you to apply graphical effects to elements.
How saturate() Works
- Syntax: The syntax for the saturate function is `filter: saturate(value);`.
- Value: The value can be a percentage (e.g., `saturate(150%)`), where:
- 100% means no change to the color.
- Values greater than 100% increase saturation (making colors more vivid).
- Values less than 100% decrease saturation (making colors more muted).
Example Usage
- To make an image more vivid, you might use:
css
img {
filter: saturate(150%);
}
- Conversely, to mute the colors, you could use:
css
img {
filter: saturate(50%);
}
Conclusion
In conclusion, the saturate() function is essential for adjusting color intensity in web design, making elements visually appealing through enhanced color management. It is specifically designed for use with the CSS `filter` property, ensuring that developers can easily manipulate the visual presentation of their elements.

Understanding the Contrast Function
The function that adjusts the difference between light and dark values in images is the contrast() function. This function is crucial for enhancing the visual quality of graphics and photographs.
What is Contrast?
- Contrast refers to the difference in luminance or color that makes an object distinguishable.
- Increasing contrast makes the dark areas darker and the light areas lighter, thereby enhancing the image's depth and vibrancy.
Why is contrast() the Correct Answer?
- The contrast() function specifically targets the relationship between lighter and darker shades in an image.
- It allows users to manipulate how pronounced these differences are, which can significantly affect the mood and clarity of the visual content.
Other Options Explained
- dark(): This function typically darkens an image but does not adjust the overall contrast.
- light(): Similar to dark(), this function brightens an image without altering the contrast levels.
- brightness(): This function adjusts the overall brightness of an image but does not focus on the differentiation between light and dark values.
Conclusion
In summary, the contrast() function is key for image manipulation, allowing users to effectively enhance the distinction between light and dark areas. This makes it the correct choice when looking to adjust these values specifically.

Understanding the Grayscale Function
The function that converts an element's color to a shade of gray is known as `grayscale()`. This function is primarily used in CSS with the `filter` property.
What is `grayscale()`?
- The `grayscale()` function is part of the CSS Filter Effects Module.
- It allows developers to manipulate the color of an image or element, transforming it into varying shades of gray.
How Does It Work?
- When you apply `grayscale(value)` to an element, the `value` can range from 0% to 100%.
- 0% means no change, keeping the original color.
- 100% turns the element completely gray, removing all color saturation.
Example of Usage
- Here is a simple example of how you can use `grayscale` in CSS:
css
img {
filter: grayscale(100%);
}
- In this case, the image will appear entirely in shades of gray.
Why Choose `grayscale()`?
- This function is widely used in web design for various purposes:
- Focus on Content: It helps to draw attention to specific elements by muting others.
- Aesthetic Appeal: Grayscale images can enhance the overall design and create a classic look.
Conclusion
In summary, the correct answer to your question is option 'B', `grayscale()`, because it specifically converts colors into shades of gray using the CSS filter property. This function is invaluable for designers aiming to achieve a specific visual effect on web pages.