Some CSS functions are used specifically for certain properties. The first of these functions we will learn about are color functions. These functions can only be used as values for color properties.
The main color functions are:
rgb()function which defines color using the standard RGB (red, green, and blue) model.
rgba()function, which is similar to the
rgb()function except it also defines an alpha channel to specify the color’s opacity level.
hsl()function. This function defines color using hue, saturation and lightness.
hsla()function. Again, this function is similar to the
hsl()function except it also defines an alpha channel that specifies the color’s opacity level.
While each of the color functions has been covered extensively in the Learn CSS Colors lesson, by seeing them in the context of functions, we can get a feel for using property-specific CSS functions!
.card-body selector ruleset in the style.css stylesheet. Use the
rgb() function to change the
background property’s color value to be an off-white color with a red value of 255, a green value of 247, and a blue value of 255.
rgba() function create an overlay effect on the postcard’s background image. Navigate to the
.location-details selector add a
background property and set its value to be
Use a red value of 209, a green value of 207, and a blue value of 63. Set the alpha value to be 0.3.
Moving on to the
.card-body::before, .card-body::after selector ruleset, add a color for the
border property. After the
solid value add a value using the
hsl() function with a hue of 25, a saturation of 47% and a lightness of 86%.
The border around the card’s body should now be a shade of yellow.
Finally, set a light blue font color for each list item at the bottom of the postcard. Inside the
ul.activities selector ruleset, add a
color property and set its value to be the
Give the function a hue of 208, a saturation of 69%, lightness of 66%, and an alpha value of 0.6.