css - Colors and Backgrounds

 CSS allows you to specify colors and backgrounds for HTML elements, which improves the visual attractiveness of a web page.

a) Color Properties

Text Color (color): Defines the color of the text.

p {

  color: red;

}

Background Color (background-color): Sets the background color of an element.

div {

  background-color: #f4f4f4;

}

b) Color Values

There are several ways to define colors in CSS:

Named Colors: Predefined color names like red, blue, green.

h1 {

  color: navy;

}

Hexadecimal Colors: Use # followed by six digits (e.g., #FF5733).

body {

  background-color: #FF5733;

}

RGB Colors: Specify color using RGB values (e.g., rgb(255, 87, 51)).

p {

  color: rgb(255, 87, 51);

}

RGBA Colors: Similar to RGB but with an added alpha channel for opacity (e.g., rgba(255, 87, 51, 0.5)).

div {

  background-color: rgba(0, 0, 0, 0.3);

}

c) Background Properties

In addition to background-color, CSS offers various background-related properties:

Background Image: Apply an image as the background of an element.

body {

  background-image: url('image.jpg');

}

Background Repeat: Controls how background images are repeated (or not repeated).

body {

  background-repeat: no-repeat;

}

Background Size: Defines the size of the background image.

body {

  background-size: cover;

}