CSS Básico: Dando Estilo a la Web

Si HTML es el **esqueleto** de tu página web, **CSS** es la piel, la ropa, el maquillaje y la decoración. CSS (Cascading Style Sheets, Hojas de Estilo en Cascada) es el lenguaje que usamos para **estilizar** tus documentos HTML, controlando su apariencia, diseño y cómo se presentan en diferentes dispositivos.

Piensa en CSS como la parte del diseño de una casa: elige los colores de las paredes, el tipo de muebles, cómo se distribuyen las habitaciones y qué tan grandes son las ventanas.

—

1. ¿Cómo Funciona CSS?

Para que CSS pueda dar estilo a tu HTML, necesitas decirle a qué elementos aplicar qué estilos. Esto se hace a través de **reglas CSS**.

Una regla CSS básica consta de dos partes principales:

  1. Selector: Apunta al elemento o elementos HTML que deseas estilizar.
  2. Declaración: Define las propiedades de estilo que deseas aplicar a esos elementos. Una declaración tiene una **propiedad** y un **valor**, separados por dos puntos (:), y terminando con un punto y coma (;).
/* Selector  { Propiedad: Valor; Propiedad: Valor; } */
p {
    color: blue; /* El color del texto será azul */
    font-size: 16px; /* El tamaño de la fuente será de 16 píxeles */
}
—

2. Tres Formas de Incluir CSS en HTML

Hay tres maneras principales de vincular tus estilos CSS con tus documentos HTML. Cada una tiene sus usos, pero una es la más recomendada.

a. CSS Externo (¡La Mejor Práctica!)

Los estilos se escriben en un archivo .css separado (como tu style.css) y se vinculan al documento HTML usando la etiqueta <link> dentro de la sección <head>.

  • Ventajas: Organización (HTML limpio), **Reutilización** (mismo CSS para múltiples páginas), y **Carga Rápida** (el navegador lo guarda en caché).
<head>
    <meta charset="UTF-8">
    <title>Mi Página</title>
    <link rel="stylesheet" href="style.css"> <!-- Aquí se vincula -->
</head>

b. CSS Interno

Los estilos se escriben directamente dentro del documento HTML, dentro de una etiqueta <style> que se coloca en la sección <head>.

  • Ventajas: Útil para estilos muy específicos de una sola página o para pequeñas demos.
  • Desventajas: No es ideal para sitios grandes, ya que mezcla la presentación con la estructura.
<head>
    <meta charset="UTF-8">
    <title>Mi Página</title>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: navy;
        }
    </style>
</head>

c. CSS en Línea (Inline CSS)

Los estilos se aplican directamente a un elemento HTML específico utilizando el atributo style.

  • Ventajas: Para cambios muy rápidos y puntuales, o para sobrescribir temporalmente.
  • Desventajas: **Mala Práctica General.** Mezcla HTML y CSS, es difícil de mantener, no se puede reutilizar y tiene una alta especificidad (lo que hace que sea difícil de anular).
<h1 style="color: red; font-size: 24px;">Este es un título rojo</h1>
—

3. Selectores CSS: Apuntando a los Elementos Correctos

Los selectores son cruciales en CSS; te permiten elegir con precisión qué elementos HTML quieres estilizar.

a. Selector de Tipo (Elemento)

Selecciona todos los elementos de un tipo HTML específico.

p {
    color: green; /* Todos los párrafos serán verdes */
}
a {
    text-decoration: none; /* Elimina el subrayado de todos los enlaces */
}

b. Selector de Clase

Selecciona todos los elementos que tienen un atributo class específico. Un elemento puede tener múltiples clases.

  • En HTML: <p class="resaltado">
  • En CSS: Se selecciona con un punto (.) seguido del nombre de la clase.
<p class="resaltado">Este párrafo está resaltado.</p>
<h2 class="resaltado">También este título.</h2>
.resaltado {
    background-color: yellow;
}

c. Selector de ID

Selecciona un **único** elemento que tiene un atributo id específico. Los IDs deben ser **únicos** en todo el documento HTML.

  • En HTML: <div id="cabecera-principal">
  • En CSS: Se selecciona con un hash (#) seguido del nombre del ID.
<div id="cabecera-principal">
    <h1>Mi Sitio Web</h1>
</div>
#cabecera-principal {
    background-color: #333;
    padding: 20px;
}

d. Selectores Combinadores

Permiten seleccionar elementos basándose en su relación con otros elementos (padre-hijo, hermanos, etc.).

  • Descendiente ( – espacio): Selecciona elementos que son descendientes (en cualquier nivel) de otro elemento. 
    div p { /* Selecciona todos los párrafos que están dentro de un div */
    margin-bottom: 5px;
}
  • Hijo Directo (>): Selecciona elementos que son hijos directos de otro elemento. 
    ul > li { /* Selecciona solo los <li> que son hijos directos de un <ul> */
    list-style-type: square;
}
  • Hermano Adyacente (+): Selecciona un elemento que es **inmediatamente** precedido por otro elemento (ambos con el mismo padre). 
    h1 + p { /* Selecciona el párrafo que viene inmediatamente después de un h1 */
    font-style: italic;
}
  • Hermano General (~): Selecciona **todos** los elementos que son precedidos por otro elemento (ambos con el mismo padre). 
    h2 ~ p { /* Selecciona todos los párrafos que vienen después de un h2 */
    text-indent: 20px;
}
—

4. Propiedades CSS Comunes (¡Hay Cientos!)

Aquí están algunas de las propiedades más utilizadas para empezar a estilizar tu contenido.

a. Color y Fondo

  • color: Color del texto.
  • background-color: Color de fondo de un elemento.
  • background-image: Imagen de fondo.
  • background-repeat: Cómo se repite una imagen de fondo.
  • background-position: Posición de una imagen de fondo.
body {
    background-color: #f4f4f4; /* Un gris muy claro */
    color: #333; /* Texto gris oscuro */
}
.hero-section {
    background-image: url('imagen-fondo.jpg');
    background-repeat: no-repeat;
    background-position: center top;
}

b. Texto y Fuentes

  • font-family: Tipo de fuente.
  • font-size: Tamaño de la fuente (ej. 16px, 1.2em, 2rem).
  • font-weight: Grosor de la fuente (ej. normal, bold, 700).
  • font-style: Estilo de la fuente (ej. normal, italic).
  • text-align: Alineación del texto (left, center, right, justify).
  • text-decoration: Decoración del texto (underline, line-through, none).
  • line-height: Altura de la línea (espaciado entre líneas de texto).
p {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    line-height: 1.5;
    text-align: justify;
}
h1 {
    font-weight: bold;
    text-decoration: underline;
}

c. Modelo de Caja (Box Model)

Recordando el Box Model: **contenido**, **padding**, **borde** y **margen**.

  • width, height: Ancho y alto del contenido.
  • padding: Espacio entre el contenido y el borde. (Ej: padding: 10px; o padding-top, padding-right, etc.)
  • border: Borde alrededor del padding. (Ej: border: 1px solid black;)
  • margin: Espacio fuera del borde, separando elementos. (Ej: margin: 10px auto;)
  • box-sizing: Propiedad crucial que controla cómo se calculan width y height (content-box por defecto, border-box preferido).
.card {
    width: 300px;
    padding: 20px 15px; /* Arriba/Abajo 20px, Izquierda/Derecha 15px */
    border: 2px dashed #4CAF50;
    margin: 10px auto; /* Arriba/Abajo 10px, Izquierda/Derecha auto (para centrar elementos de bloque) */
    box-sizing: border-box; /* Asegura que el ancho sea 300px incluyendo padding y borde */
}

d. Propiedad `display`

Fundamental en CSS, determina el tipo de caja de visualización de un elemento y cómo se comporta en relación con otros elementos.

  • block: Ocupa todo el ancho disponible y comienza en una nueva línea (ej. <div>, <p>, <h1>).
  • inline: Ocupa solo el espacio que necesita y no comienza en una nueva línea (ej. <a>, <span>).
  • inline-block: Se comporta como inline (no salta de línea) pero acepta width, height, margin y padding como un block.
  • none: Oculta completamente el elemento (no ocupa espacio en el layout).
  • flex: Convierte el elemento en un contenedor flex (para Flexbox).
  • grid: Convierte el elemento en un contenedor grid (para CSS Grid).
.inline-text {
    display: inline; /* Se comporta como texto normal, uno al lado del otro */
    background-color: lightgray;
}

.inline-button {
    display: inline-block; /* Permite width/height pero no salta de línea */
    width: 100px;
    padding: 10px;
    background-color: #4CAF50;
}

.hidden-element {
    display: none; /* No se muestra en la página y no ocupa espacio */
}
—

5. La Cascada y la Especificidad

Aquí es donde CSS obtiene su nombre «Cascading». Cuando múltiples reglas CSS intentan aplicar estilos a un mismo elemento, la **cascada** y la **especificidad** determinan qué estilo «gana».

  • Cascada: Los estilos que vienen después en tu hoja de estilos sobrescriben a los anteriores.
  • Especificidad: Es una «puntuación» que se calcula para cada selector. Un selector más específico anula uno menos específico, incluso si este último aparece después en el código.
    • **ID** (#id): La más alta (1,0,0).
    • **Clase** (.class) y **Atributo** ([type="text"]): Especificidad media (0,1,0).
    • **Tipo** (elemento p, div): La más baja (0,0,1).
/* Ejemplo de Especificidad */
#miParrafo { /* 1,0,0 - ¡Gana! */
    color: purple;
}
.texto-destacado { /* 0,1,0 */
    color: orange;
}
p { /* 0,0,1 */
    color: green;
}
/* HTML: <p id="miParrafo" class="texto-destacado">Este es un texto.</p> */
/* Resultado: El texto será PURPLE, porque el ID tiene mayor especificidad. */
—

Tu Próxima Práctica CSS

Recuerda:

  1. Asegúrate de que tu archivo mi-primera-pagina.html esté enlazado a tu style.css en la sección <head>.
  2. Actualiza el contenido de mi-primera-pagina.html con las clases y IDs que te di en la sección «Tu Próxima Práctica CSS» de la respuesta anterior.
  3. Verifica que tu style.css contenga **todos** los estilos consolidados que te proporcioné en la respuesta anterior (incluyendo los nuevos para las clases como .main-header, .info-section, .external-link, y el ID #personal-article).
  4. Abre mi-primera-pagina.html en tu navegador. ¡Deberías ver cómo tus estilos CSS transforman la página HTML básica y le dan vida!

Este ejercicio te dará una experiencia práctica con los selectores de tipo, clase e ID, y cómo afectan a los elementos HTML. ¡Juega con los valores de las propiedades y los colores para ver los cambios al instante!

—

Con estos fundamentos, ya tienes una base sólida para empezar a estilizar tus páginas web. Los próximos pasos serán aprender sobre el **Modelo de Caja (Box Model)** a fondo y las técnicas de layout modernas como **Flexbox** y **CSS Grid**, que te permitirán posicionar y organizar tus elementos de forma muy potente.