</> Introducción a CSS: Estilizando tu Web

¡Bienvenidos a la primera clase de CSS! Después de conocer HTML para estructurar, ahora aprenderemos a dar estilo.

1. ¿Qué es CSS? Hojas de Estilo en Cascada

CSS, o Cascading Style Sheets, es un lenguaje de diseño gráfico que se utiliza para definir la presentación y el estilo de los documentos HTML. Mientras que HTML proporciona la estructura y el contenido de una página, CSS se encarga del diseño, los colores, las fuentes, la disposición y otros aspectos visuales. Piensa en HTML como la "esqueleto" de tu página y en CSS como la "ropa" y el "maquillaje".

Su propósito fundamental es separar el contenido de la presentación, lo que facilita la gestión y el mantenimiento de sitios web grandes. Esto permite a los desarrolladores modificar el diseño de múltiples páginas con un solo cambio en un archivo CSS, lo que ahorra tiempo y esfuerzo.

2. La anatomía de una regla CSS

Una regla de CSS es la unidad básica del lenguaje y consta de dos partes principales:

h1 {
    color: blue;
    font-size: 24px;
}

En este ejemplo, el selector es h1, y las declaraciones son color: blue; y font-size: 24px;.

3. ¿Cómo vinculamos CSS y HTML?

🔗 1. CSS Externo

Es la forma más profesional y recomendada. Se crea un archivo .css por separado (por ejemplo, style.css) y se enlaza a la página HTML usando la etiqueta <link> en la sección <head>.

<head>
    <link rel="stylesheet" href="style.css">
</head>

Ideal para sitios web grandes. ¡Un cambio en un archivo afecta a todas las páginas!

📄 2. CSS Interno

Se utiliza la etiqueta <style> dentro de la sección <head> de un documento HTML. Las reglas CSS se escriben directamente dentro de esta etiqueta.

<head>
    <style>
        body {
            background-color: lightblue;
        }
    </style>
</head>

Útil para estilos específicos de una sola página, pero no escalable.

📝 3. CSS en Línea (Inline)

Se aplican estilos directamente a un elemento HTML usando el atributo style. Esto tiene la mayor especificidad y prevalece sobre los otros métodos.

<p style="color: red; font-size: 16px;">
    ¡Hola Mundo!
</p>

No se recomienda. Mezcla el contenido con la presentación y hace el código difícil de leer y mantener.

4. Selectores CSS: ¡Dominando a tus elementos!

Los selectores son la clave para controlar qué elementos HTML reciben qué estilos. Hay muchos tipos, pero estos son los más comunes para empezar:

Selector de Tipo o Etiqueta ▼

Selecciona todos los elementos con una etiqueta específica (h1, p, ul, li, etc.).

/* Selecciona todos los párrafos */
p {
    line-height: 1.6;
}
Selector de Clase ▼

Selecciona todos los elementos que tienen un atributo class específico. Se usa un punto (.) antes del nombre de la clase.

/* En HTML */
<h2 class="titulo-destacado">¡Atención!</h2>
/* En CSS */
.titulo-destacado {
    color: red;
    font-weight: bold;
}
Selector de ID ▼

Selecciona un elemento único con un atributo id. Se usa un numeral (#) antes del nombre del ID. Un ID debe ser único por página.

/* En HTML */
<div id="menu-principal">...</div>
/* En CSS */
#menu-principal {
    background-color: #333;
}
Selector de Descendientes ▼

Selecciona un elemento que es descendiente de otro. Por ejemplo, ul li selecciona todos los li que están dentro de un ul.

ul li {
    list-style-type: none;
    color: #4f46e5;
}

5. Conceptos avanzados que debes conocer

📝 El Modelo de Caja (Box Model)

Cada elemento en HTML es una caja rectangular. El modelo de caja describe cómo se estructuran y se dimensionan estas cajas, considerando:

  • Contenido: El área donde se muestra el texto o las imágenes.
  • Padding (Relleno): El espacio entre el borde y el contenido.
  • Border (Borde): La línea alrededor del relleno.
  • Margin (Margen): El espacio alrededor del borde, que separa la caja de otros elementos.

Comprender este modelo es crucial para alinear elementos y crear diseños complejos.

.caja {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}

📋 Herencia y Especificidad

  • 1 Herencia: Algunas propiedades CSS, como color y font-family, se heredan automáticamente de un elemento padre a sus hijos. Por ejemplo, si estableces un color para el body, todos los párrafos dentro de él lo heredarán.
  • 2 Especificidad: Este es el sistema de jerarquía que determina qué regla de estilo se aplica a un elemento cuando hay múltiples reglas que lo seleccionan. Las reglas con mayor especificidad "ganan". La jerarquía es: ID > Clase > Etiqueta. El estilo en línea tiene la máxima especificidad.

6. Propiedades y valores básicos

Propiedad Descripción Valores de ejemplo
color Define el color del texto. red, #ff5733, rgb(255, 87, 51)
font-size Establece el tamaño de la fuente. 16px, 1.2em, medium
background-color Define el color de fondo de un elemento. lightblue, #ccc, rgba(0,0,0,0.5)
border Aplica un borde. 1px solid black, 2px dashed red
text-align Alinear el texto dentro de un elemento. left, right, center, justify

7. Glosario de Términos Clave

Selector: Es la "dirección" o el "objetivo" que le dice al navegador qué elemento(s) HTML debe(n) ser estilizado(s). Puede ser una etiqueta, una clase, un ID, etc.

Declaración: Es la "instrucción" de estilo completa. Se encuentra dentro de las llaves {} e incluye tanto la propiedad (lo que quieres cambiar, ej. color) como su valor (cómo quieres cambiarlo, ej. blue).

Etiqueta: También conocido como "selector de tipo", es el nombre de un elemento HTML (como p, h1, div). Al usar un selector de etiqueta, aplicas estilos a todos los elementos de ese tipo en la página.

Clases (class): Es un atributo que puedes asignar a uno o más elementos HTML. Permite agrupar elementos y aplicarles el mismo estilo CSS, incluso si son de diferentes tipos de etiquetas. En CSS, se representa con un punto (.) antes del nombre.

8. Tabla de Referencia Rápida

Concepto/Comando Estructura/Sintaxis Explicación Ejemplo
Regla CSS selector { propiedad: valor; } Es la unidad fundamental de CSS. Consiste en un selector que apunta al elemento HTML a estilizar y una o más declaraciones (pares propiedad: valor) que definen el estilo. p { font-size: 16px; color: #333; }
Selector de Etiqueta etiqueta { ... } Selecciona todos los elementos HTML que coincidan con el nombre de la etiqueta. Es la forma más básica de selección. h1 { text-align: center; }
Selector de Clase .nombre-clase { ... } Selecciona todos los elementos que tengan el atributo class con el valor especificado. Permite aplicar el mismo estilo a múltiples elementos no relacionados. /* HTML: <div class="card">...</div> */ .card { border-radius: 10px; }
Selector de ID #nombre-id { ... } Selecciona un único elemento HTML con el atributo id especificado. Los IDs deben ser únicos en una página para funcionar correctamente. /* HTML: <main id="contenido-principal">... </main> */ #contenido-principal { max-width: 960px; }
Selector de Descendiente selector-padre selector-hijo { ... } Selecciona todos los elementos hijos que están contenidos dentro de un elemento padre específico. Útil para aplicar estilos contextuales. ul li { list-style-type: none; }
El Modelo de Caja width, height, padding, border, margin Describe cómo se renderiza cada elemento HTML como una caja rectangular con capas de contenido, relleno, borde y margen. Comprenderlo es crucial para el layout. div { padding: 15px; border: 2px solid black; margin: 10px; }
Herencia (automática para ciertas propiedades) Ciertas propiedades CSS (como color y font-family) se heredan automáticamente de un elemento padre a sus descendientes. Esto simplifica la aplicación de estilos. body { font-family: 'Arial'; }
(Todos los elementos hijos heredarán esta fuente)
Especificidad (jerarquía de selectores) Es el sistema de puntuación que determina qué regla CSS prevalece cuando hay múltiples reglas que se aplican al mismo elemento. La especificidad va de menor a mayor: ID > Clase > Etiqueta. El estilo `inline` tiene la mayor especificidad. #menu-principal es más específico que .menu
Propiedad: color color: valor; Define el color del texto de un elemento. Los valores pueden ser nombres de colores, códigos hexadecimales (hex) o valores RGB/RGBA. p { color: red; }
h2 { color: #4f46e5; }
Propiedad: font-size font-size: valor; Establece el tamaño de la fuente. Se pueden usar diferentes unidades, como píxeles (px), ems (em) o rems (rem). p { font-size: 16px; }
h1 { font-size: 2.5rem; }
Propiedad: background-color background-color: valor; Define el color de fondo de un elemento. Útil para crear contrastes y secciones visualmente distintas. .card { background-color: #f3f4f6; }
Propiedad: border border: ancho tipo color; Aplica un borde alrededor de un elemento. Se define con el ancho, el tipo de línea (sólido, punteado, etc.) y el color. div { border: 2px solid black; }
Propiedad: text-align text-align: valor; Alinear el texto dentro de un elemento. Los valores más comunes son left, right, center y justify. h1 { text-align: center; }
Enlace Externo <link rel="stylesheet" href="style.css"> Enlaza un archivo CSS externo. Es la práctica recomendada para mantener el código limpio y fácil de mantener. Se coloca en la sección <head>.
Estilo Interno <style>...</style> Permite escribir reglas CSS directamente dentro de la sección <head> de un documento HTML. Útil para estilos específicos de una sola página.
Estilo en Línea <p style="...">...</p> Aplica estilos directamente en el atributo style de un elemento HTML. No se recomienda por su baja reusabilidad y alta especificidad.