Texto CSS

Tabla de contenido

CSS tiene muchas propiedades para formatear texto.

text formatting

This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored "Try it Yourself" link.

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid gray;
  padding: 8px;
}

h1 {
  text-align: center;
  text-transform: uppercase;
  color: #4CAF50;
}

p {
  text-indent: 50px;
  text-align: justify;
  letter-spacing: 3px;
}

a {
  text-decoration: none;
  color: #008CBA;
}
</style>
</head>
<body>

<div>
  <h1>text formatting</h1>
  <p>This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties.
  The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored
  <a target="_blank" href="tryit.asp?filename=trycss_text">"Try it Yourself"</a> link.</p>
</div>

</body>
</html>

Color de texto

La propiedad color se utiliza para establecer el color del texto. El color está especificado por:

un nombre de color, como "rojo"
un valor HEX, como "#ff0000"
un valor RGB, como "rgb(255,0,0)"

Mire los valores de color CSS para obtener una lista completa de posibles valores de color.

El color de texto predeterminado para una página se define en el selector de cuerpo.

Ejemplo

body {
  color: blue;
}

h1 {
  color: green;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: blue;
}

h1 {
  color: green;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector.</p>
<p>Another paragraph.</p>

</body>
</html>

Color del texto y color de fondo

En este ejemplo, definimos tanto la propiedad color de fondo como la propiedad color:

Ejemplo

body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}

  div {
  background-color: blue;
  color: white;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}

div {
  background-color: blue;
  color: white;
}
</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This page has a grey background color and a blue text.</p>
<div>This is a div.</div>

</body>
</html>

Importante: El alto contraste es muy importante para las personas con problemas de la vista. Por lo tanto, asegúrese siempre de que el contraste entre el color del texto y el color de fondo (o imagen de fondo) ¡es bueno!

La propiedad de color de texto CSS

color: Especifica el color del texto.