Guía Práctica: Dale Color y Estilo a tu Página Web con CSS

En las sesiones anteriores armaste la estructura de tu página con HTML. Hoy darás el siguiente gran paso: usar CSS (Cascading Style Sheets) para transformarla de un documento básico a un sitio web moderno y colorido.

1. ¿Dónde y cómo escribimos CSS?

Escribiremos el código CSS dentro del mismo archivo mi_pagina.html, agregando la etiqueta <style> dentro de la sección <head>.

También es habitual escribir el código CSS en un archivo aparte del HTML

La "Fórmula Mágica" del CSS

Cada regla de diseño se compone de esta manera:

etiqueta {
    propiedad: valor;
}

• Etiqueta (Selector): Elemento al que le cambiarás el aspecto (ej: body, h1, button).
• Propiedad: Qué característica vas a modificar (ej: color, background-color).
• Valor: El ajuste que le vas a aplicar (ej: blue, center).

⚠️ Recuerda: Cada propiedad termina obligatoriamente con un punto y coma (;).

2. Código de ejemplo para agregar a tu archivo

Abre tu archivo mi_pagina.html en el Bloc de notas y pega este bloque dentro del <head>:

<!-- Bloque de diseño CSS interno -->
<style>

    /* Estilos generales para el fondo y texto de toda la página */
    body {
        background-color: #f0f4f8; /* Color de fondo claro */
        font-family: Arial, sans-serif; /* Tipo de letra moderna */
        color: #2c3e50; /* Color del texto general */
        padding: 20px; /* Margen interno para no pegar el texto a los bordes */
    }

    /* Estilos para el título principal */
    h1 {
        color: #2980b9; /* Color de texto azul */
        text-align: center; /* Centra el título en la pantalla */
    }

    /* Estilos para destacar textos */
    strong {
        color: #e74c3c; /* Cambia las palabras en negrita a rojo */
    }

    /* Estilos para personalizar el botón */
    button {
        background-color: #2ecc71; /* Fondo verde */
        color: white; /* Texto blanco */
        border: none; /* Quita el borde por defecto */
        padding: 10px 20px; /* Tamaño del botón */
        border-radius: 20px; /* Esquinas redondeadas */
        cursor: pointer; /* Cambia el cursor al pasar por encima */
    }

</style>

3. Guía para Elegir Colores como un Profesional

Elegir buenos colores es un arte. Sigue estas recomendaciones para que tu sitio se vea profesional y sea fácil de leer:

2. La Regla de los 3 Colores (No pintes un arcoíris)

Elige solo 3 roles de color para evitar que la página se vea desordenada:

• Color de Fondo (60%): Un tono suave o neutro (blanco, gris claro o negro).
• Color de Texto Principal (30%): Un color legible para los párrafos.
• Color de Acento (10%): Un color llamativo reservado solo para destacar (títulos <h1>, palabras clave <strong> o botones <button>).

3. Tres Formas Rápidas de Obtener Colores

1. Nombres en Inglés: HTML reconoce más de 140 nombres. Prueba nombres más específicos que solo red o blue:
   • En lugar de rojo: crimson, tomato, coral.
   • En lugar de azul: navy, skyblue, royalblue.
   • En lugar de verde: seagreen, forestgreen.
2. Google Color Picker: Busca en Google la frase color picker para abrir una paleta interactiva. Elige el tono exacto y copia su código de 6 dígitos que empieza con # (ejemplo: #3498db).
3. Paletas Automáticas: Entra a sitios gratuitos como Coolors.co o Color Hunt para copiar paletas combinadas por diseñadores.

4. Tu Misión: Personaliza tu diseño

Modifica los valores dentro de la etiqueta <style> en tu archivo para cumplir los siguientes retos:

• 1. Cambia el fondo: Modifica el background-color del body aplicando la regla de contraste.
• 2. Modifica los títulos: Ajusta el color del h1 y experimenta cambiando la alineación con text-align: left;, center; o right;.
• 3. Cambia tamaños de fuente: Agrega la propiedad font-size: 22px; a tus párrafos (p) para probar distintos tamaños.
• 4. Diseña tu botón: Cambia el color de fondo y el redondeado de los bordes probando con border-radius: 5px; o border-radius: 50px;.

5. Tabla de propiedades CSS rápidas

Propiedad CSS	¿Qué cambia?	Ejemplo de uso
background-color	Color de fondo de la etiqueta	background-color: darkslategrey;
color	Color del texto	color: crimson;
font-family	Tipo de letra / fuente	font-family: 'Comic Sans MS', sans-serif;
font-size	Tamaño del texto	font-size: 20px;
text-align	Alineación del texto (center, left, right)	text-align: center;
border-radius	Redondeado de bordes y esquinas	border-radius: 12px;