Apuntes css

¿Para qué quieres herencias cuando tienes !important?

Lección 1: Introducción a CSS

CSS define la apariencia de una página web: colores, fuentes, márgenes, disposición de los elementos…
En esta introducción veremos cómo separa contenido de presentación y por qué es esencial en el desarrollo web.

¿Qué es CSS?

CSS (Cascade Style Sheets) permite separar el contenido de una página (definido en HTML) de su presentación (colores, fuentes, márgenes). Esta separación mejora el diseño, facilita el mantenimiento y asegura consistencia en sitios web, ya sea una sola página o cientos.

Con CSS, puedes cambiar la apariencia de un sitio entero modificando un solo archivo de estilos, sin tocar el HTML.

Ejemplo:

p {
    color: blue;
}

El término "hoja" (sheet) se refiere a que preferentemente los estilos se definen en un archivo (hoja) aparte y aplican a todo un sitio web.
El término “en cascada” hace referencia a cómo se combinan y resuelven los estilos cuando hay varias reglas aplicables al mismo elemento.

Beneficios de CSS:

  • Mantenimiento fácil: Cambia un estilo y afecta a todas las páginas vinculadas.
  • Consistencia: Unifica la apariencia de un sitio.
  • Tamaño reducido: Archivos CSS optimizados agilizan la carga.
  • Control preciso: Personaliza fuentes, márgenes, layouts, y más.

CSS es un estándar del W3C y está soportado por todos los navegadores modernos (Chrome, Firefox, Safari, Edge).

Sintaxis básica de CSS

Una regla CSS consta de:

  • Selector: Identifica el elemento HTML (por ejemplo: p, .clase, #id).
  • Propiedades: Define qué cambiar (por ejemplo: color, font-size).
  • Valores: Especifica cómo cambiarlo (por ejemplo: blue, 16px).

Ejemplo:

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

Esto hace que todos los <h1> sean rojos con un tamaño de fuente de 24 píxeles.

Ejemplo en acción:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo de CSS</title>
    <style>
        p {
            color: blue;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <p>Este párrafo es azul con un margen izquierdo.</p>
</body>
</html>

La cascada en CSS

CSS significa "en cascada" porque las reglas pueden provenir de múltiples fuentes (archivo externo, estilos en la página, preferencias del usuario) y entrar en conflicto. La cascada decide qué regla prevalece según:

  • Especificidad: Selectores más específicos (por ejemplo, #id > .clase > etiqueta) tienen prioridad.
  • Orden: Reglas posteriores anulan las anteriores si tienen la misma especificidad.

Ejemplo:

p {
    color: blue; /* Regla general para todos los <p> */
}
#parrafo-especial {
    color: red; /*  Esta regla específica para el id anula la anterior  */
}

<p id="parrafo-especial">Este párrafo es rojo.</p>

En lecciones posteriores veremos cómo controlar la especificidad con precisión.

Breve historia de CSS

En los inicios de la web, HTML se centraba en contenido, no en diseño. Para efectos visuales se usaban tablas o trucos inconsistentes entre navegadores. En 1996, el W3C lanzó CSS1, que definía reglas para estilizar elementos. CSS2 (1998) añadió posicionamiento y layouts básicos. CSS3 (desde 2010) introdujo módulos modernos como Flexbox y Grid.

Hoy, CSS es modular, con actualizaciones continuas como Container Queries. El W3C y WHATWG trabajan juntos para que CSS y HTML evolucionen en paralelo.

¿Por qué aprender CSS?

CSS es la base del diseño web moderno. Con CSS puedes:

  • Crear layouts responsivos para móviles y escritorio.
  • Personalizar visualmente con fuentes, colores y animaciones.
  • Mantener sitios escalables y fáciles de actualizar.

En este curso, explorarás:

  • Selectores: para apuntar a elementos específicos.
  • Modelo de caja: para comprender márgenes, bordes y paddings.
  • Flexbox y Grid: para layouts modernos y flexibles.
  • Pseudoclases: para interactividad.

Si aprendes a usar CSS con soltura, podrás controlar el diseño de tus páginas sin depender de plantillas externas o frameworks (o a usarlos sabiendo por que hacen lo que hacen).

Nota: No puedes esperar comprender CSS si no tienes al menos una base en HTML

Siguiente paso: Aprende a incluir CSS en tus páginas (inline, interno, externo) en la próxima lección.

TOP