Colors and Backgrounds

Previous Next

Applying Colors To Elements Using CSS Color Properties

CSS Color Properties:

1. color Property:

The color property is used to set the text color of an element. You can specify colors using color names, hexadecimal codes, RGB values, RGBA values, HSL values, or HSLA values.

Example:

p {
color: blue; /* Using color name */
}

2. background-color Property:

The background-color property sets the background color of an element. Like the color property, it supports various color formats.

Example:

div {
background-color: #ff0000; /* Using hexadecimal code */
}

3. border-color Property:

The border-color property sets the color of an element's border. It can be applied individually to each side (top, right, bottom, left) using properties like border-top-color, border-right-color, etc., or all sides collectively using border-color.

Example:

div {
border: 2px solid green; /* Using color name */
}

4. box-shadow Property:

The box-shadow property creates a shadow effect around an element. It includes a color value to specify the color of the shadow.

Example:

div {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* Using RGBA color */
}

Specifying Colors:

1. Color Names:

CSS provides predefined color names like red, blue, green, etc., which can be directly used to set colors.

Example:

h1 {
color: red; /* Using color name */
}

2. Hexadecimal Codes:

Hexadecimal codes are six-digit codes that represent colors in RGB format. They start with a # symbol followed by six hexadecimal digits.

Example:

div {
background-color: #00ff00; /* Using hexadecimal code for green */
}

3. RGB Values:

RGB values represent colors using a combination of red, green, and blue values. Each value ranges from 0 to 255.

Example:

p {
color: rgb(255, 0, 0); /* Using RGB value for red */
}

4. RGBA Values:

RGBA values are similar to RGB but include an additional alpha channel to specify opacity. The alpha value ranges from 0 to 1.

Example:

span {
background-color: rgba(0, 0, 255, 0.5); /* Using RGBA value for semi-transparent blue */
}

5. HSL Values:

HSL (Hue, Saturation, Lightness) values represent colors using a different color model. Hue is represented as an angle between 0 and 360 degrees, saturation and lightness are represented as percentages.

Example:

a {
color: hsl(120, 100%, 50%); /* Using HSL value for green */
}

6. HSLA Values:

HSLA values are similar to HSL but include an additional alpha channel for opacity.

Example:

button {
background-color: hsla(0, 100%, 50%, 0.7); /* Using HSLA value for semi-transparent red */
}

Applying Colors with Examples:

1. Text Color:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>This is a blue heading</h1>
</body>
</html>

Try it now

2. Background Color:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: #ffcc00;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<p>This is a yellow background</p>
</div>
</body>
</html>

Try it now

3. Border Color:

<!DOCTYPE html>
<html>
<head>
<style>
.box {
border: 2px solid green;
padding: 10px;
}
</style>
</head>
<body>
<div class="box">
<p>This box has a green border</p>
</div>
</body>
</html>

Try it now

4. Box Shadow:

<!DOCTYPE html>
<html>
<head>
<style>
.shadow-box {
width: 200px;
height: 200px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="shadow-box"></div>
</body>
</html>

Try it now

Practice Excercise Practice now

Creating Gradient Backgrounds, Image Backgrounds, And Patterns With CSS Background Properties

1. Gradient Backgrounds:

Linear Gradient:

A linear gradient creates a transition of colors along a straight line. It's defined using the linear-gradient() function in CSS.

Example:

.gradient {
background: linear-gradient(to right, #ff0000, #00ff00);
}

In this example, a linear gradient is applied from red (#ff0000) on the left to green (#00ff00) on the right.

Radial Gradient:

A radial gradient creates a transition of colors from the center to the edges in a circular or elliptical pattern. It's defined using the radial-gradient() function in CSS.

Example:

.radial {
background: radial-gradient(circle, #ff0000, #00ff00);
}

Here, a radial gradient is applied with a circular shape transitioning from red to green.

Repeating Gradients:

Repeating gradients allow gradients to repeat in a pattern. They're created using the repeating-linear-gradient() or repeating-radial-gradient() functions.

Example:

.repeating-gradient {
background: repeating-linear-gradient(to right, #ff0000, #00ff00 20%);
}

This creates a repeating linear gradient from red to green with a 20% interval.

2. Image Backgrounds:

Background Image:

CSS allows you to set images as backgrounds using the background-image property.

Example:

.image-background {
background-image: url('path/to/image.jpg');
background-size: cover;
background-position: center;
}

Here, an image is set as the background, and background-size: cover ensures the image covers the entire element, while background-position: center centers the image.

Multiple Background Images:

You can also use multiple images as backgrounds and layer them using the background-image property.

Example:

.multiple-images {
background-image: url('path/to/image1.jpg'), url('path/to/image2.jpg');
}

3. Background Patterns:

Background Repeat:

CSS provides options to repeat background images horizontally, vertically, or in both directions using the background-repeat property.

Example:

.pattern {
background-image: url('path/to/pattern.png');
background-repeat: repeat-x; /* Repeat horizontally */
}

Background Size:

The background-size property controls how a background image is scaled or repeated within its container.

Example:

.pattern {
background-image: url('path/to/pattern.png');
background-size: 100px 100px; /* Size of pattern */
}

Complete Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Backgrounds</title>
<style>
/* Gradient Background */
.gradient {
height: 200px;
background: linear-gradient(to right, #ff0000, #00ff00);
}

/* Radial Gradient */
.radial {
height: 200px;
background: radial-gradient(circle, #ff0000, #00ff00);
}

/* Repeating Gradient */
.repeating-gradient {
height: 200px;
background: repeating-linear-gradient(to right, #ff0000, #00ff00 20%);
}

/* Image Background */
.image-background {
height: 200px;
background-image: url('path/to/image.jpg');
background-size: cover;
background-position: center;
}

/* Multiple Images Background */
.multiple-images {
height: 200px;
background-image: url('path/to/image1.jpg'), url('path/to/image2.jpg');
background-position: left top, right bottom; /* Layering multiple images */
background-repeat: no-repeat, repeat; /* Repeat for one image, no repeat for the other */
}

/* Background Pattern */
.pattern {
height: 200px;
background-image: url('path/to/pattern.png');
background-repeat: repeat-x; /* Repeat horizontally */
background-size: 100px 100px; /* Size of pattern */
}
</style>
</head>
<body>
<div class="gradient"></div>
<div class="radial"></div>
<div class="repeating-gradient"></div>
<div class="image-background"></div>
<div class="multiple-images"></div>
<div class="pattern"></div>
</body>
</html>

Try it now

In this example:

.gradient, .radial, and .repeating-gradient demonstrate different types of gradient backgrounds.
.image-background shows how to use an image as a background.
.multiple-images layers multiple images as backgrounds.
.pattern creates a background pattern using a repeated image.

Practice Excercise Practice now

Previous Next

Colors and Backgrounds

Applying Colors To Elements Using CSS Color Properties

CSS Color Properties:

Creating Gradient Backgrounds, Image Backgrounds, And Patterns With CSS Background Properties

1. Gradient Backgrounds:

COMPANY

Products

OTHERS

Partner