Color

CSS Color Summary

Color changes the color of text. Background color changes the color behind an element. These are two of the most common CSS properties.

p {
	color: blue;
}
.box {
	background-color: yellow;
}

Text Color

The color property changes the color of text inside an element.

p {
	color: blue;
}

This would make paragraph text blue.

Background Color

The background-color property changes the color behind an element. This is often used for buttons, boxes, page sections, and alerts.

.box {
	background-color: yellow;
}

Color Names

CSS has basic color names like red, blue, green, black, white, and orange. These are easy to read and useful when learning.

h2 {
	color: red;
}

Hex Colors

Websites often use hex colors. A hex color starts with # and then uses letters and numbers to describe a specific color.

.button {
	color: #ffffff;
	background-color: #000000;
}

This would make a button with white text on a black background.

Contrast

Color should make text easy to read. Dark text on a light background is usually easy to read. Light text on a dark background can also work.