El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En esta lección, aprenderemos sobre las propiedades de texto en CSS. Estas propiedades nos permiten controlar la apariencia del texto en nuestras páginas web, incluyendo aspectos como el color, el tamaño, el espaciado y la alineación.

Color del Texto

La propiedad color en CSS se utiliza para definir el color del texto. Puedes especificar el color usando nombres de colores, valores hexadecimales, valores RGB o valores HSL.

p {
    color: blue; /* Nombre del color */
}

h1 {
    color: #ff6347; /* Valor hexadecimal */
}

h2 {
    color: rgb(255, 99, 71); /* Valor RGB */
}

h3 {
    color: hsl(9, 100%, 64%); /* Valor HSL */
}

Tamaño del Texto

La propiedad font-size se utiliza para definir el tamaño del texto. Puedes especificar el tamaño en diferentes unidades como píxeles (px), em, rem, porcentajes (%), entre otros.

p {
    font-size: 16px; /* Tamaño en píxeles */
}

h1 {
    font-size: 2em; /* Tamaño relativo al elemento padre */
}

h2 {
    font-size: 1.5rem; /* Tamaño relativo a la raíz del documento */
}

h3 {
    font-size: 120%; /* Tamaño en porcentaje */
}

Alineación del Texto

La propiedad text-align se utiliza para alinear el texto dentro de su contenedor. Los valores comunes son left, right, center y justify.

p {
    text-align: left; /* Alineación a la izquierda */
}

h1 {
    text-align: center; /* Alineación centrada */
}

h2 {
    text-align: right; /* Alineación a la derecha */
}

h3 {
    text-align: justify; /* Alineación justificada */
}

Decoración del Texto

La propiedad text-decoration se utiliza para agregar decoraciones al texto, como subrayado, línea a través, o sobrelineado.

p {
    text-decoration: underline; /* Subrayado */
}

h1 {
    text-decoration: line-through; /* Línea a través */
}

h2 {
    text-decoration: overline; /* Sobrelineado */
}

h3 {
    text-decoration: none; /* Sin decoración */
}

Espaciado entre Letras y Palabras

Las propiedades letter-spacing y word-spacing se utilizan para ajustar el espaciado entre letras y palabras, respectivamente.

p {
    letter-spacing: 2px; /* Espaciado entre letras */
}

h1 {
    word-spacing: 5px; /* Espaciado entre palabras */
}

Altura de Línea

La propiedad line-height se utiliza para definir la altura de la línea del texto. Esto puede ayudar a mejorar la legibilidad del texto.

p {
    line-height: 1.5; /* Altura de línea relativa */
}

h1 {
    line-height: 2; /* Altura de línea relativa */
}

h2 {
    line-height: 24px; /* Altura de línea en píxeles */
}

Ejercicios Prácticos

Ejercicio 1: Cambiar el Color del Texto

Cambia el color del texto de todos los párrafos a verde utilizando un valor hexadecimal.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio 1</title>
    <style>
        p {
            color: #008000; /* Verde */
        }
    </style>
</head>
<body>
    <p>Este es un párrafo de ejemplo.</p>
    <p>Este es otro párrafo de ejemplo.</p>
</body>
</html>

Ejercicio 2: Ajustar el Tamaño del Texto

Ajusta el tamaño del texto de todos los encabezados h1 a 3em.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio 2</title>
    <style>
        h1 {
            font-size: 3em; /* Tamaño del texto */
        }
    </style>
</head>
<body>
    <h1>Encabezado de Ejemplo</h1>
</body>
</html>

Ejercicio 3: Alinear el Texto

Alinea el texto de todos los párrafos al centro.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio 3</title>
    <style>
        p {
            text-align: center; /* Alineación centrada */
        }
    </style>
</head>
<body>
    <p>Este es un párrafo de ejemplo.</p>
    <p>Este es otro párrafo de ejemplo.</p>
</body>
</html>

Ejercicio 4: Decorar el Texto

Subraya el texto de todos los encabezados h2.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio 4</title>
    <style>
        h2 {
            text-decoration: underline; /* Subrayado */
        }
    </style>
</head>
<body>
    <h2>Encabezado de Ejemplo</h2>
</body>
</html>

Ejercicio 5: Espaciado entre Letras

Ajusta el espaciado entre letras de todos los párrafos a 3px.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio 5</title>
    <style>
        p {
            letter-spacing: 3px; /* Espaciado entre letras */
        }
    </style>
</head>
<body>
    <p>Este es un párrafo de ejemplo.</p>
    <p>Este es otro párrafo de ejemplo.</p>
</body>
</html>

Conclusión

En esta lección, hemos aprendido sobre las propiedades de texto en CSS, incluyendo cómo cambiar el color, tamaño, alineación, decoración y espaciado del texto. Estas propiedades son fundamentales para mejorar la apariencia y legibilidad del texto en nuestras páginas web. En la próxima lección, exploraremos las propiedades de fuentes en CSS.

Propiedades de Texto

Contenido

Color del Texto

Tamaño del Texto

Alineación del Texto

Decoración del Texto

Espaciado entre Letras y Palabras

Altura de Línea

Ejercicios Prácticos

Ejercicio 1: Cambiar el Color del Texto

Ejercicio 2: Ajustar el Tamaño del Texto

Ejercicio 3: Alinear el Texto

Ejercicio 4: Decorar el Texto

Ejercicio 5: Espaciado entre Letras

Conclusión

Maestría en CSS: De Principiante a Avanzado

Módulo 1: Introducción a CSS

Módulo 2: Estilización de Texto y Fuentes

Módulo 3: Modelo de Caja y Diseño

Módulo 4: Posicionamiento y Flotación

Módulo 5: Flexbox

Módulo 6: CSS Grid

Módulo 7: Técnicas Avanzadas de CSS

Módulo 8: Diseño Responsivo

Módulo 9: Preprocesadores y Frameworks

Módulo 10: Mejores Prácticas y Optimización

Módulo 11: Proyecto: Construyendo un Sitio Web Responsivo