Colors¶

CSS allows you to style elements with different colors for text, backgrounds, borders, and more.

1. Color Properties¶

p {
  color: red;
}

div {
  background-color: #f0f0f0;
}

input {
  border: 1px solid #333;
}

Predefined color names.

h1 {
  color: blue;
}

p {
  color: #ff0000; /* red */
}

div {
  background-color: rgb(255, 255, 255);
}

div {
  background-color: rgba(0, 0, 0, 0.5);
}

Hue, Saturation, Lightness.

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

section {
  background-color: hsla(120, 100%, 50%, 0.3);
}

div {
  background-color: transparent;
}