🌐 Web Development Roadmap, Part 26

CSS Colors & Backgrounds

CSS colors and backgrounds help you control the appearance of webpage elements.

You can change text colors, background colors, background images, and more.

1. CSS Color Property

The color property changes the text color of an element.

<h1>Welcome to My Website</h1>
<p>Learning CSS is fun.</p>

h1 {
    color: blue;
}

p {
    color: red;
}

You can use predefined color names such as:

• red

• blue

• green

• black

• white

• orange

• purple

• gray

• pink

• yellow

2. HEX Colors

HEX stands for hexadecimal color notation.

It uses a # followed by six characters.

h1 {
    color: #FF0000;
}

p {
    color: #0000FF;
}

Some common HEX colors:

• Red: #FF0000

• Green: #00FF00

• Blue: #0000FF

• Black: #000000

• White: #FFFFFF

• Yellow: #FFFF00

3. RGB Colors

RGB stands for:

• R = Red

• G = Green

• B = Blue

Each value ranges from 0 to 255.

h1 {
    color: rgb(255, 0, 0);
}

This produces red.

Examples:

.red {
    color: rgb(255, 0, 0);
}

.green {
    color: rgb(0, 255, 0);
}

.blue {
    color: rgb(0, 0, 255);
}

4. RGBA Colors

RGBA adds an alpha channel to RGB.

The alpha value controls transparency.

It ranges from 0 to 1.

.box {
    background-color: rgba(255, 0, 0, 0.5);
}

Here:

• 1 = Fully opaque

• 0.5 = 50% opacity

• 0 = Fully transparent

5. HSL Colors

HSL stands for:

• H = Hue

• S = Saturation

• L = Lightness

Example:

h1 {
    color: hsl(0, 100%, 50%);
}

Another example:

p {
    color: hsl(240, 100%, 50%);
}

This produces blue.

6. Background Color

The background-color property changes the background of an element.

body {
    background-color: lightblue;
}

h1 {
    background-color: yellow;
}

You can use color names, HEX, RGB, RGBA, or HSL values.

7. Background Images

You can add images as backgrounds using background-image.

body {
    background-image: url("background.jpg");
}

This displays an image behind the webpage content.

8. Background Size

The background-size property controls how the background image fits inside an element.

body {
    background-image: url("background.jpg");
    background-size: cover;
}

Common values:

• cover — Covers the entire container.

• contain — Fits the entire image inside the container.

• auto — Uses the original image dimensions.

9. Background Repeat

By default, background images may repeat if they are smaller than their container.

body {
    background-image: url("pattern.png");
    background-repeat: no-repeat;
}

Other values:

background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;

10. Background Position

Controls where the background image appears.

body {
    background-image: url("background.jpg");
    background-position: center;
}

• center

• top

• bottom

• left

• right

11. Background Shorthand

You can combine multiple background properties into one declaration.

body {
    background: lightblue url("background.jpg") no-repeat center / cover;
}