Basics of CSS Colors

In this lesson, we’ll learn the fundamental CSS color properties and values that allow us to enhance the visuals of our web pages. Manipulating colors effectively is a great way to create engaging and accessible user experiences. We’ll explore text color, background color, border color, and the various ways to define colors in CSS, including named colors, hexadecimal, RGB(A), HSL(A), and CSS variables.

Changing foreground color

The color property in CSS sets the foreground color of an element’s text content. It’s one of the most commonly used properties for styling text.

In the above CSS code, we set the text color of elements with the class highlight to blue.

Changing background color

The background-color property sets the background color of an element, filling the area behind the content and padding.

In the above CSS code, we set the background color of elements with the class alert to yellow.

Changing border color

The border-color property specifies the color of an element’s border. It’s often used in conjunction with border-style and border-width.

In the above code:

• Line 2: We define a 2px solid border.

• ...