Skip to main content

Text, Color, and Background Styling

Text styling, colors and backgrounds

Learn about text styling, colors, and backgrounds with CSS. Discover how to apply fonts, text weight, alignment, decorations, and colors in various formats, including names and hexadecimal values.

Text Styling​

CSS offers a variety of properties for styling the text of HTML elements. These properties allow you to control the appearance of the text, including font, weight, alignment, and decorations.

Text Properties​

CSS offers a variety of properties for styling text:

font-family: Defines the font family.

CSS
p {
  font-family: Arial, sans-serif;
}

font-weight: Defines the text thickness.

CSS
p {
  font-weight: bold;
}

text-align: Defines the text alignment.

CSS
h1 {
  text-align: center;
}

text-decoration: Defines decorations such as underlining, strikethrough, etc.

CSS
a {
  text-decoration: none;
}

Colors in CSS​

CSS allows you to define colors in various ways:

Color Names:

CSS
p {
  color: blue;
}

Hexadecimal Values:

Hexadecimal numbers are numbers represented in base 16, which means the digits 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F instead of just 0-9.

A hexadecimal color is specified with:#RRGGBBwhere the hexadecimal integers RR (red), GG (green), and BB (blue) specify the color components.

For example,#ff0000It's displayed in red because red is set to its highest value (ff) and the others are set to their lowest value (00).

To display black, set all values to 00.#000000

To display white, set all values to ff:#ffffff

CSS
p {
  color: #0000ff;
}

RGB Values:

In CSS, a color can be specified as an RGB value using this formula:rgb (rojo, verde, azul)

Each parameter (red, green, and blue) defines the color intensity between 0 and 255.

For example, rgb(255, 0, 0) displays red because red is set to its highest value (255) and the others are set to 0.

To display black, set all color parameters to 0, like this: rgb(0, 0, 0).

To display white, set all color parameters to 255: rgb(255, 255, 255).

CSS
p {
  color: rgb(0, 0, 255);
}

RGBA values (with opacity):

CSS
p {
  color: rgba(0, 0, 255, 0.5);
}

Backgrounds in CSS​

Background properties allow you to customize the appearance of element backgrounds:

background-color: Defines the background color.

CSS
div {
  background-color: #f0f0f0;
}

background-image: Defines a background image.

CSS
div {
  background-image: url("imagen.jpg");
}

background-repeat: Defines whether the background image repeats.

CSS
div {
  background-repeat: no-repeat;
}

background-size: Defines the size of the background image.

CSS
/* Valores de palabras clave */
background-size: cover;
background-size: contain;

/* Sintaxis de un valor */
/* El ancho de la imagen (la altura 'height' se vuelve 'automática') */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;

/* Sintaxis de dos valores */
/* primer valor: ancho de la imagen, segundo valor: alto */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;
Resources
Exercises

💻Get your hands on the code with these simple challenges: