1. Color Values
Named Colors: Predefined color names like red, blue, green, black, etc.
Hexadecimal Values: Uses #RRGGBB (or shorthand #RGB).
RGB (Red, Green, Blue): Defines colors using rgb(r, g, b) with values from 0-255.
RGBA: Same as RGB but with an alpha (opacity) channel (0.0 fully transparent to 1.0 fully opaque).
HSL (Hue, Saturation, Lightness): Defines colors more intuitively.
HSLA: Adds alpha (opacity) to HSL.
CSS Example
h1 { color: red; }
p { color: #00ff00; }
div { color: rgba(0, 0, 255, 0.5); }2. Background Color
Sets a solid color background for an element.
CSS Example
body { background-color: lightblue; }
p { background-color: yellow; }3. Background Image
Apply an image as a background.
CSS Example
div {
background-image: url('https://via.placeholder.com/150');
width: 200px;
height: 100px;
}4. Background Repeat / Position / Size
Control how background images repeat, where they are positioned, and how they scale.
CSS Example
div {
background-image: url('https://via.placeholder.com/50');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 200px;
height: 120px;
}5. Background Gradient
CSS allows gradients as backgrounds: linear, radial, and conic.
CSS Example
.linear {
background: linear-gradient(to right, red, yellow);
padding: 20px;
}
.radial {
background: radial-gradient(circle, blue, white);
padding: 20px;
}
.conic {
background: conic-gradient(from 90deg, red, yellow, green, blue);
padding: 20px;
}6. Multiple Backgrounds
You can layer multiple backgrounds on a single element.
CSS Example
div {
background: url('https://via.placeholder.com/40/ff0000') no-repeat left,
url('https://via.placeholder.com/40/0000ff') no-repeat right,
linear-gradient(to right, #ddd, #eee);
padding: 40px;
}