(Intermediate HTML & CSS) CSS Functions Knowledge Assessment Guide 2024, Exams of Programming Languages

Download (Intermediate HTML & CSS) CSS Functions Knowledge Assessment Guide 2024 and more Exams Programming Languages in PDF only on Docsity!

INTERMEDIATE HTML & CSS

CSS Functions

KNOWLEDGE ASSESSMENT GUIDE

1. Which CSS function is used to apply a transformation to an element?
   • a) rotate()
   • b) scale()
   • c) translate()
   • d) All of the above

Answer: d) All of the above

Rationale: The rotate(), scale(), and translate() functions are all used to apply different types of transformations to elements.

2. What does the calc() function in CSS allow you to do?
   • a) Perform calculations to determine CSS property values
   • b) Create animations
   • c) Apply filters to images
   • d) Define custom properties

Answer: a) Perform calculations to determine CSS property values

Rationale: The calc() function allows for mathematical expressions to be used in CSS property values.

3. Which of the following is a valid use of the var() function in CSS?
   • a) color: var(--main-color);

Answer: c) color-mix()

Rationale: The color-mix() function is used to blend two colors together.

Fill-in-the-Blank Questions

6. The clamp() function in CSS is used to set a value that is within a range defined by a minimum, a preferred value, and a maximum. For example, font-size: clamp(1rem, 2.5vw, 2rem); sets the font size to be between ______ and ______.

Answer: 1rem, 2rem

Rationale: The clamp() function ensures the value stays within the specified minimum and maximum limits.

7. In CSS, the repeat() function is used with the ______ property to repeat a pattern of tracks.

Answer: grid-template-columns

Rationale: The repeat() function is commonly used with grid properties to define repeating patterns of tracks.

8. The attr() function in CSS is used to retrieve the value of an attribute of the selected element and use it in the stylesheet. For example, content: attr(data-info); retrieves the value of the ______ attribute.

Answer: data-info

Rationale: The attr() function fetches the value of the specified attribute from the HTML element.

9. The env() function in CSS is used to access environment variables. For example, padding: env(safe-area-inset-top); is used to access the ______ variable.

Answer: safe-area-inset-top

Rationale: The env() function accesses environment variables, such as those related to safe areas on devices.

10. The url() function in CSS is used to include a file. For example, background-image: url('image.jpg'); includes the file named ______.

Answer: image.jpg

Rationale: The url() function specifies the path to a file, such as an image.

True/False Questions

11. The max() function in CSS returns the largest value from a list of comma-separated values.

15. The linear-gradient() function in CSS creates a gradient that transitions between multiple colors along a straight line.

Answer: True

Rationale: The linear-gradient() function creates a gradient that transitions between colors in a straight line.

16. The perspective() function in CSS is used to apply a 3D perspective effect to an element.

Answer: True

Rationale: The perspective() function is used to apply a 3D perspective effect, making elements appear closer or farther away.

17. The scale() function in CSS can only increase the size of an element.

Answer: False

Rationale: The scale() function can both increase and decrease the size of an element.

18. The translate() function in CSS moves an element along the X and Y axes.

Answer: True

Rationale: The translate() function moves an element horizontally and vertically.

19. The matrix() function in CSS is used to apply a 2D transformation using a matrix of six values.

Answer: True

Rationale: The matrix() function applies a 2D transformation using a matrix of six values.

20. The filter() function in CSS can be used to apply graphical effects like blur and brightness to an element.

Answer: True

Rationale: The filter() function applies graphical effects such as blur, brightness, contrast, and more. Multiple Choice: Which CSS function is used to apply a blur effect to an element's background? A) brightness() B) hue-rotate() C) blur() D) opacity()

B) contrast() C) sepia() D) drop-shadow()

Correct Answer: B) contrast()

Rationale: The contrast() function allows for the modification of an element's contrast to enhance or reduce the visual impact of its content. Fill-in-the-Blank: The CSS function brightness() is utilized to control the brightness of an element.

Correct Answer: brightness

Rationale: Adjusting the brightness() function alters the brightness level of an element, making it appear lighter or darker based on the specified value. True/False: The sepia() function in CSS creates a sepia-toned effect by applying a reddish-brown color overlay.

Correct Answer: True

Rationale: By using the sepia() function, an element can be transformed into a sepia-toned version, reminiscent of vintage photographs.

Multiple Choice: Which CSS function is ideal for rotating the hue of an element's background color? A) contrast() B) invert() C) saturate() D) hue-rotate()

Correct Answer: D) hue-rotate()

Rationale: The hue-rotate() function is specifically designed to rotate the hue of an element's background color, offering a spectrum of color variations. Fill-in-the-Blank: The CSS function opacity() adjusts the level of transparency of an element.

Correct Answer: opacity

Rationale: By manipulating the opacity() function, the transparency of an element can be controlled, allowing for the creation of visually appealing overlays and effects. True/False: The saturate() function in CSS is used to desaturate the colors of an element.

Rationale: Implementing the blur() function enables the creation of a blur effect on an element, adding a sense of depth and dimensionality to its appearance. True/False: The brightness() function in CSS adjusts the brightness of an element's text content only.

Correct Answer: False

Rationale: The brightness() function modifies the overall brightness of an element, affecting its entire visual presentation rather than just the text content. Multiple Choice: Which CSS function is ideal for converting an element to shades of sepia? A) saturate() B) sepia() C) invert() D) contrast()

Correct Answer: B) sepia()

Rationale: The sepia() function is specifically designed to transform an element into sepia tones, reminiscent of vintage photography.

Fill-in-the-Blank: The CSS function saturate() increases the saturation of an element.

Correct Answer: saturation

Rationale: By adjusting the saturate() function, the saturation levels of an element can be heightened, enriching its color intensity. True/False: The contrast() function in CSS is used to adjust the contrast of an element's borders exclusively.

Correct Answer: False

Rationale: The contrast() function impacts the overall contrast of an element, influencing its entire visual composition rather than focusing solely on borders. Multiple Choice: Which CSS function is employed to convert an element to shades of gray? A) brightness() B) grayscale() C) hue-rotate() D) drop-shadow()

B) contrast() C) invert() D) brightness()

Correct Answer: A) opacity()

Rationale: The opacity() function enables the manipulation of an element's transparency levels, allowing for the creation of visually layered effects. Fill-in-the-Blank: The CSS function hue-rotate() rotates the hue of an element's background color.

Correct Answer: hue

Rationale: By applying the hue-rotate() function, the hue of an element's background color can be dynamically rotated, producing a spectrum of color variations to enhance its visual appeal.

1. Multiple Choice: Which CSS function is used to rotate an element in 3D space?

A) calc() B) rotateX() C) skewY() D) translateZ()

Correct Answer: B) rotateX()

Rationale: The rotateX() function is used to rotate an element around its X-axis in 3D space.

2. Fill in the Blank: The mix-blend-mode property in CSS functions is used to specify how an element blends with the _________ of its parent and background.

Correct Answer: colors (or elements)

Rationale: The mix-blend-mode property determines how elements blend with their parent and background colors.

3. True/False: The cubic-bezier() function in CSS is used to create custom easing functions for animations.

Correct Answer: True

Rationale: The cubic-bezier() function allows for the creation of custom easing functions for transitions and animations.

4. Multiple Choice: Which CSS function is used to apply a blur effect to an element? A) invert() B) saturate()

Correct Answer: C) linear-gradient()

Rationale: The linear-gradient() function is used to create a linear gradient background for elements.

8. Fill in the Blank: The attr() function in CSS is used to insert the value of an element's __________ attribute.

Correct Answer: HTML

Rationale: The attr() function is used to insert the value of an HTML element's attribute.

9. True/False: The calc() function in CSS is used to perform calculations to determine the value of a property.

Correct Answer: True

Rationale: The calc() function in CSS allows for calculations to be performed to determine property values.

10. Multiple Choice: Which CSS function is used to create a repeating pattern for a background image? A) repeat() B) pattern() C) repeat-pattern() D) url()

Correct Answer: A) repeat()

Rationale: The repeat() function is used to create a repeating pattern for background images in CSS.

11. Fill in the Blank: The clamp() function in CSS is used to allow a value to be within a specified range, defined by a __________ value, a preferred value, and a maximum value.

Correct Answer: minimum

Rationale: The clamp() function in CSS allows values to be within a range defined by a minimum, preferred, and maximum value.

12. True/False: The matrix() function in CSS is used to apply a 3D transformation to an element.

Correct Answer: False

Rationale: The matrix() function in CSS is used to apply a 2D transformation to elements.

13. Multiple Choice: Which CSS function is used to change the brightness of an element? A) brightness() B) hue-rotate() C) contrast() D) saturate()

Correct Answer: A) brightness()

Rationale: The brightness() function in CSS is used to change the brightness of an element.