For the best experience
This app works best on desktop or laptop screens. To fully enjoy the interactive challenges, we recommend using a larger device.
CHALLENGE 1 - COLOR
Apply the color property to both blocks so that each text matches the required color shown in the target layout.
Playground
5010015020025030035050100150200250
Roses are red 🌹
Green like a frog 🐸
Target Layout
5010015020025030035050100150200250
Roses are red 🌹
Green like a frog 🐸
Congratulations!
You’ve successfully completed the Styling Essentials level! You mastered essential CSS properties like color, font-family and text-align. Keep experimenting and applying what you’ve learnedcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolorcolor
A bit of theory...
The color property defines the color of text inside an element.
It affects only the text content and does not change the background of the element.
Colors can be defined using keywords, hexadecimal values, RGB, or HSL formats.
Changing the text color helps improve readability and visual hierarchy in a design.
Using the color property effectively is essential for styling typography.
Syntax
/* Named color */
color: red;/* Hexadecimal value */
color: #ff0000;/* RGB value */
color: rgb(255, 0, 0);/* HSL value */
color: hsl(0, 100%, 50%);Suggested solutions
/* block1 */
color: red;
/* block2 */
color: green;