CURSO de CSS 2021 Rapido y Facil # 16 | 💻 TEXTO II

Summary

Este video cubre las etapas finales de un curso básico de CSS, donde se exploran varias técnicas para manejar el texto en páginas web. El instructor muestra cómo ajustar el tamaño de las fuentes, agregar sombras a los textos, trabajar con alineaciones y utilizar Google Fonts para personalizar las tipografías. También se enseña a descargar y aplicar fuentes locales, controlar el espaciado entre palabras y líneas, y aplicar decoraciones de texto. Al final, se revisan diversas propiedades útiles para darle estilo al texto en CSS, concluyendo el curso de manera práctica y clara.

Takeaways

• 💻 El curso de CSS está a punto de terminar, solo falta cubrir la segunda parte relacionada con texto.
• 📄 Se añaden etiquetas HTML como h1, h2 y párrafos para demostrar la manipulación de texto.
• 🔠 Se utiliza la propiedad `font-size` para cambiar el tamaño de fuente, con ejemplos de 300px para h1.
• 🎨 Se aplican colores personalizados al texto usando `color`, utilizando referencias de colores predefinidos.
• 🖼️ La propiedad `text-shadow` se emplea para añadir sombras al texto, controlando la dirección con píxeles.
• 🔡 Se demuestra cómo usar `font-family` para cambiar el tipo de letra, y se explica la diferencia entre fuentes `serif` y `sans-serif`.
• 🌐 Se explica cómo importar fuentes de Google Fonts usando `@import`, facilitando la integración sin necesidad de descargas.
• 📂 El video enseña cómo añadir una fuente descargada manualmente mediante `@font-face` y especificar la ruta en el código.
• 📝 Se trabaja con `word-spacing` para ajustar el espacio entre palabras y `line-height` para modificar el espacio entre líneas.
• 🖋️ Se menciona la propiedad `text-indent` para crear sangrías y `text-decoration` para agregar o quitar subrayados en el texto.

Q & A

¿Cuál es el objetivo principal del curso en el video?

El objetivo es enseñar conceptos básicos de CSS, especialmente cómo aplicar estilos a textos, incluyendo tamaño de fuente, color, sombras, espaciado y uso de fuentes personalizadas.

¿Cómo se cambia el tamaño de la fuente de un texto en CSS?

Para cambiar el tamaño de la fuente, se utiliza la propiedad `font-size`. En el ejemplo del video, el tamaño de la fuente del `h1` se establece en 300 píxeles con la instrucción: `font-size: 300px;`.

¿Cómo se puede centrar un texto usando CSS?

Para centrar un texto, se utiliza la propiedad `text-align` con el valor `center`. En el video, esto se aplica al texto de la etiqueta `h1` con la instrucción: `text-align: center;`.

¿Cómo se añade una sombra al texto?

Se puede añadir una sombra al texto usando la propiedad `text-shadow`. En el video, se usa `text-shadow: 5px 15px #000;`, donde `5px` es el desplazamiento horizontal, `15px` es el desplazamiento vertical y `#000` es el color de la sombra.

¿Qué diferencias existen entre las fuentes serif y sans-serif?

Las fuentes `serif` tienen pequeños remates o adornos en los extremos de las letras, mientras que las fuentes `sans-serif` no tienen estos detalles y tienen un diseño más limpio y moderno. En el video, se menciona que la fuente `serif` tiene un acabado más rígido.

¿Cómo se importa una fuente de Google Fonts?

Para importar una fuente desde Google Fonts, se utiliza el método `@import` en el archivo CSS. Se copia el enlace proporcionado por Google Fonts y se pega al inicio del archivo CSS. En el video, se usa la fuente `Montserrat` como ejemplo.

¿Por qué es importante utilizar el protocolo HTTPS al usar fuentes de Google?

Es importante porque Google Fonts requiere que las fuentes se carguen desde un sitio web seguro (HTTPS). Si el sitio no utiliza HTTPS, la fuente puede no visualizarse correctamente en algunos navegadores.

¿Cómo se puede agregar una fuente personalizada desde un archivo local?

Para agregar una fuente desde un archivo local, se utiliza la regla `@font-face` en CSS. Se especifica la URL del archivo de la fuente usando la propiedad `src`. En el video, se muestra cómo cargar la fuente `Pacifico.ttf` desde una carpeta local llamada `fuente`.

¿Qué propiedad se utiliza para ajustar el espaciado entre palabras?

La propiedad `word-spacing` se utiliza para ajustar el espaciado entre palabras. En el video, se muestra cómo incrementar este espaciado en 50 píxeles con la instrucción: `word-spacing: 50px;`.

¿Qué propiedad se utiliza para ajustar el espaciado entre líneas de texto?

Se utiliza la propiedad `line-height` para ajustar el espaciado entre líneas de texto. En el video, se establece un espaciado de 50 píxeles con la instrucción: `line-height: 50px;`.