🗨️ Editar texto en CSS
Tipografía
Para editar la tipografía (fuente) de un texto, debes usar la propiedad font-family
. Hay muchos valores que puedes usar dentro de esta propiedad, como por ejemplo Arial, Helvetica, sans-serif
. Te recomiendo usar el auto completado de Visual Studio Code para buscar las fuentes disponibles.
Ejemplo:
h1 {
font-family: Arial, Helvetica, sans-serif;
}
También puedes cambiar la fuente de un texto utilizando una fuente de Google.
Tamaño de texto
Para editar el tamaño de texto, debes usar la propiedad font-size
. Puedes especificar el tamaño del texto en pixeles, por ejemplo 20px
. Hay más unidades de medidas disponibles, como em
, rem
que los veremos a detalle en una siguiente sección.
Ejemplo:
h1 {
font-size: 20px;
}
Alineación
text-align
es la propiedad que te permite cambiar la alineación del texto. Algunos de los valores disponibles para esta propiedad son: left
, center
, right
, justify
, start
o end
.
Ejemplo:
h1 {
text-align: center;
}
Esta propiedad también la puedes aplicar a un párrafo entero para justificar su contenido por ejemplo, y esto lo puedes hacer así: text-align: justify;
.
Sombras
Para agregar sombras a un texto debes usar las propiedad text-shadow
. Los valores que llevará son los siguientes: offset-x
, offset-y
, blur-radius
, color
. A continuación un ejemplo:
h1 {
text-shadow: 2px 2px 4px #000000;
}
Donde:
offset-x
representa la distancia que tendrá la sombra horizontalmente,offset-y
representa la distancia que tendrá la sombra verticalmente,blur-radius
representa la intensidad de la sombra,color
representa el color de la sombra.
Explicación en video:
¿Deseas ver los conceptos anteriores aplicados en un ejemplo práctico? mira el siguiente video: