Diseño Web

Introducción a CSS: Sintaxis y Lógica Visual

El HTML define qué es el contenido, pero el CSS define cómo se ve. En este módulo desglosamos la sintaxis fundamental para que aprendas a hablar el lenguaje del diseño web, desde la estructura de una regla hasta la importancia de las unidades de medida.

CSS actúa como la capa de presentación que viste y da vida a la estructura ósea del HTML.

Premisas: Estructura vs. Presentación

CSS (Cascading Style Sheets) es el lenguaje encargado de la presentación visual. Su función es separar el contenido (HTML) del diseño. Imagina que el HTML es el esqueleto y los ladrillos de una casa, mientras que el CSS es la pintura, la decoración y la disposición de los muebles. Permite controlar colores, tipografías, espacios y la ubicación exacta de los elementos.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<h1>Bienvenidos</h1>
<p>Este es un texto plano.</p>


<style>
  h1 { color: blue; font-size: 40px; }
  p { font-family: sans-serif; }
</style>

<h1>Bienvenidos</h1>
<p>Este es un texto plano.</p>


<style>
  h1 { color: blue; font-size: 40px; }
  p { font-family: sans-serif; }
</style>

El Impacto Visual: Antes y Después

Un documento HTML sin CSS se ve monótono, lineal y aburrido (generalmente texto negro sobre fondo blanco con fuente Times New Roman). Al aplicar CSS, transformamos esa misma estructura en una experiencia de usuario: añadimos fondos, alineamos elementos, creamos tarjetas y establecemos jerarquías visuales claras. El contenido es el mismo; la percepción cambia radicalmente.

Comparativa visual de sitio web sin CSS vs con CSS — A la izquierda, la estructura cruda del navegador. A la derecha, el resultado final tras aplicar reglas de estilo.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

selector {
    propiedad: valor;
}

/* Ejemplo Real */
h1 {
    color: red;
}

selector {
    propiedad: valor;
}

/* Ejemplo Real */
h1 {
    color: red;
}

Diagrama de sintaxis CSS mostrando selector propiedad y valor — Esquema lógico: El selector apunta al elemento, la propiedad define qué cambiar y el valor especifica cómo cambiarlo.

El Bloque de Declaración

Dentro de las llaves, definimos las declaraciones. Cada declaración es un par **Propiedad: Valor**. * **Propiedad**: ¿Qué aspecto quieres cambiar? (ej: `color`, `font-size`, `margin`). * **Valor**: ¿Cómo quieres que se vea? (ej: `red`, `20px`, `10%`). Es vital usar dos puntos (`:`) para separar la propiedad del valor y terminar siempre con punto y coma (`;`).

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

p {
  /* Propiedad: Valor; */
  background-color: yellow;
  text-align: center;
}

p {
  /* Propiedad: Valor; */
  background-color: yellow;
  text-align: center;
}

Reglas Sintácticas Fundamentales

Para evitar errores de renderizado, debes respetar tres reglas de oro: 1. **Puntuación**: Siempre usa el par `propiedad: valor;`. Olvidar el punto y coma final es el error más común y anula las reglas siguientes. 2. **Espacios**: El navegador ignora los espacios en blanco extra. Puedes escribir todo en una línea o escalonado (recomendado para lectura humana). 3. **Unidades**: Si el valor es un número (excepto 0), DEBE tener unidad (`px`, `em`, `rem`, `%`). `width: 50` es inválido; `width: 50px` es correcto.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* ✅ CORRECTO */
h2 {
    font-size: 24px;
    color: #333;
}

/* ❌ INCORRECTO (Errores comunes) */
h2 {
    font-size: 24;      /* Falta unidad (px) */
    color: #333         /* Falta punto y coma */
    margin-top: 10px;   /* Esta línea no funcionaría por el error anterior */
}

/* ✅ CORRECTO */
h2 {
    font-size: 24px;
    color: #333;
}

/* ❌ INCORRECTO (Errores comunes) */
h2 {
    font-size: 24;      /* Falta unidad (px) */
    color: #333         /* Falta punto y coma */
    margin-top: 10px;   /* Esta línea no funcionaría por el error anterior */
}

¿Qué pasa si olvido poner el punto y coma (;) al final de una línea?

El navegador no sabrá dónde termina esa instrucción y dónde empieza la siguiente, por lo que interpretará todo como una sola línea errónea. Generalmente, esto anula tanto la regla actual como la que le sigue inmediatamente.

¿Es CSS sensible a mayúsculas y minúsculas (Case Sensitive)?

La mayoría de las propiedades y valores de CSS NO son sensibles (puedes escribir `COLOR: RED`), pero es una mala práctica. Sin embargo, los nombres de clases y IDs (`.miClase`) SÍ son sensibles a mayúsculas en el HTML, por lo que se recomienda escribir todo en minúsculas (kebab-case) para evitar confusiones.

¿Puedo inventar nombres de propiedades?

No. Las propiedades (como `background`, `border`, `display`) son palabras reservadas del estándar web. Si inventas una (ej: `text-color: red`), el navegador simplemente la ignorará.

¿Por qué el valor '0' no necesita unidad?

Porque cero es cero en cualquier sistema de medida. 0 píxeles es igual a 0 centímetros o 0 pulgadas. Es el único caso donde la unidad es opcional y se suele omitir por limpieza de código.

¿Dónde debo escribir mi código CSS?

Existen tres formas: 1) En un archivo externo `.css` vinculado (La mejor opción profesional), 2) En la etiqueta `<style>` dentro del `<head>`, o 3) En línea con el atributo `style` dentro de la etiqueta HTML (Desaconsejado).

¿Qué significa que el estilo sea 'en cascada'?

Significa que las reglas se aplican de arriba a abajo y pueden sobrescribirse. Si defines `color: red` al inicio y luego `color: blue` para el mismo elemento más abajo, el color final será azul debido a la cascada.

¿Cómo hago comentarios en CSS?

A diferencia de HTML (``), en CSS se usa `/* comentario */`. Todo lo que esté entre esos símbolos será ignorado por el navegador.

¿Qué es un selector de tipo?

Es cuando seleccionas directamente por el nombre de la etiqueta HTML, como `p`, `h1`, `div` o `body`. Aplicará el estilo a TODOS los elementos de ese tipo en la página.

¿Puedo agrupar selectores para aplicar el mismo estilo?

Sí, separándolos por comas. Ejemplo: `h1, h2, p { color: black; }` aplicará el color negro a esos tres tipos de elementos simultáneamente, ahorrando líneas de código.

¿Qué diferencia hay entre `color` y `background-color`?

La propiedad `color` afecta exclusivamente al primer plano (generalmente el texto), mientras que `background-color` afecta al fondo de la caja del elemento.