El estilo de texto CSS es una de las principales formas de personalizar el aspecto de un sitio web o una aplicación web. Con las diversas opciones de propiedades y valores disponibles, puede crear sorprendentes efectos visuales, desde simples cambios de color y tamaño hasta animaciones y efectos de transición.

Propiedades de estilo de texto en CSS

Para aplicar estilo al texto en un documento HTML, CSS proporciona varias propiedades que se pueden aplicar a los elementos de texto. Algunas de las principales son:

  • color: establece el color del texto;
  • font-family: define el tipo de letra utilizado en el texto;
  • font-size: define el tamaño de fuente utilizado en el texto;
  • font-weight: define el peso de la fuente utilizada en el texto;
  • text-align: define la alineación del texto dentro del elemento;
  • text-decoration: define la decoración del texto, como subrayado o tachado;
  • text-transform: define la transformación del texto, en mayúsculas o minúsculas;
  • line-height: establece la altura de la línea de texto;
  • letter-spacing: establece el espaciado entre letras en el texto;
  • word-spacing: establece el espaciado entre palabras en el texto;

Además de estas propiedades, CSS también ofrece otras opciones para diseñar el texto, como sombras, bordes, transiciones y animaciones.

Ejemplos de estilo de texto CSS

Estos son algunos ejemplos de cómo puede diseñar texto en CSS:

Cambiar el color del texto

Para cambiar el color del texto, simplemente use la propiedad color y defina el valor de color deseado en hexadecimal, RGB o nombre:

PAG { color: #ff0000; /* rojo */ }

Cambiar tamaño de fuente

Para cambiar el tamaño de fuente, simplemente use la propiedad font-size y defina el valor deseado en píxeles, em o rem:

PAG { tamaño de fuente: 16px; /* tamaño predeterminado */ } h1 { tamaño de fuente: 32px; /* tamaño grande */ } pequeño { tamaño de fuente: 12px; /* tamaño pequeño */ }

Cambiar el tipo de letra

Para cambiar la familia tipográfica utilizada en el texto, basta con utilizar la propiedad font-family y definir el nombre de la fuente deseada:

PAG { familia tipográfica: Arial, sans-serif; /* fuente predeterminada */ } h1 { familia de fuentes: "Helvetica Neue", sans-serif; /* fuente diferente */ }

Aplicar sombra al texto

Para aplicar una sombra al texto, simplemente use la propiedad text-shadow y configure los valores de desplazamiento, desenfoque y color:

h1 { sombra de texto: 2px 2px 2px #000000; /* Sombras */ }

Aplicar animación al texto

Para aplicar animación al texto, simplemente use la propiedad animation y defina la duración, la dirección, el relleno y otros valores:

h1 { animación: myanimation 2s lineal infinito; } @keyframes mianimación { 0% {color: #ff0000; } 50 % {color: #00ff00; } 100% {color: #0000ff; } }

Conclusión

El estilo de texto CSS ofrece varias opciones para personalizar el aspecto de un sitio web o una aplicación web. Con las propiedades y los valores correctos, puede crear efectos visuales asombrosos y hacer que su contenido se destaque adecuadamente. Sin embargo, es importante recordar que el estilo debe usarse con moderación y siempre teniendo en cuenta la facilidad de uso y la accesibilidad del usuario.

Ahora responde el ejercicio sobre el contenido:

_¿Qué propiedad CSS se utiliza para definir el color del texto?

¡Tienes razón! Felicitaciones, ahora pasa a la página siguiente.

¡Tú error! Inténtalo de nuevo.

Imagen del artículo Estilo de enlace en CSS

Siguiente página del libro electrónico gratuito:

12Estilo de enlace en CSS

3 minutos

¡Obtén tu certificado para este curso gratis! descargando la aplicación Cursa y leyendo el libro electrónico allí. ¡Disponible en Google Play o App Store!

Disponible en Google Play Disponible en App Store

+ 6,5 millones
estudiantes

Certificado gratuito y
válido con código QR

48 mil ejercicios
gratis

Calificación de 4.8/5
en tiendas de aplicaciones

Cursos gratuitos de
vídeo, audio y texto.