PortalTec

Programación

Qué es CSS: dónde se escribe, cómo funciona y cuándo usarlo

CSS decide cómo se ve una página. Aprende a escribir una regla, dónde ponerla (archivo aparte, <style> o atributo style) y por qué a veces no se aplica.

Publicado el

Caja de acuarelas con pastillas de muchos colores
Foto: Steve Johnson · dominio público (CC0) · vía StockSnap

CSS (Cascading Style Sheets, hojas de estilo en cascada) es el lenguaje que decide cómo se ve una página web: colores, tipos de letra, tamaños, márgenes, columnas y cómo se adapta al móvil. HTML dice qué hay en la página; CSS dice qué aspecto tiene. Con el mismo HTML y otro CSS, la página puede parecer completamente distinta.

Las partes de una regla de CSS.h1 (selector: a qué elementos se aplica) / { } (las llaves agrupan las declaraciones) / color (propiedad: qué cambias) / green (valor: cómo lo cambias)POR CAPASh1 { color: green; }h1selector: a qué elementos se aplica{ }las llaves agrupan las declaracionescolorpropiedad: qué cambiasgreenvalor: cómo lo cambias
Las partes de una regla de CSS.

Cómo es una regla de CSS

CSS se escribe en reglas. Esta pone todos los títulos <h1> en verde y más grandes:

h1 {
  color: green;
  font-size: 2.5rem;
}
  • h1 es el selector: a qué elementos se aplica la regla.
  • Entre llaves { } van las declaraciones.
  • Cada declaración es una propiedad (color), dos puntos y un valor (green), terminada en punto y coma ;.

Si falta un ; o una llave, esa regla (y a veces las siguientes) deja de funcionar sin avisar: es el primer sitio donde mirar cuando algo no cambia.

Dónde se escribe el CSS

Hay tres sitios. Los tres funcionan, pero no son iguales:

Dónde Cómo Cuándo usarlo
Archivo aparte (hoja de estilos externa) Un archivo .css enlazado desde el <head> con <link rel="stylesheet" href="estilos.css"> Casi siempre. Un solo archivo sirve para todas las páginas de tu web: cambias un color una vez y se cambia en todas
Dentro del HTML (hoja interna) Entre <style> y </style>, dentro del <head> Pruebas rápidas o una página suelta. Si tienes varias páginas, tendrás que repetir el cambio en cada una
En el propio elemento (estilo en línea) Con el atributo style: <p style="color: red"> Evítalo. Mezcla contenido y aspecto, no se puede reutilizar y gana a casi todo lo demás, lo que complica los cambios

La forma recomendada, paso a paso:

  1. En la carpeta de tu web, crea un archivo estilos.css (con la extensión bien puesta).
  2. En el <head> de tu index.html, añade <link rel="stylesheet" href="estilos.css">.
  3. Escribe tus reglas en estilos.css, guarda y recarga la página con F5.

Elegir a qué elementos se aplica: selectores

Selector Ejemplo Se aplica a
De etiqueta p { … } Todos los párrafos
De clase .aviso { … } Los elementos con class="aviso"
De identificador #portada { … } El único elemento con id="portada"

Las clases son las más útiles: pones class="aviso" a los elementos que quieras, en cualquier página, y todos comparten el estilo. Un elemento puede tener varias clases separadas por espacios: class="aviso grande".

Los tres sitios donde se puede escribir CSS y cuándo usar cada uno.Archivo .css: sí, Casi siempre; sí, Sirve para todas las páginas; Se enlaza con <link>. <style>: Pruebas o una página suelta; no, Hay que repetirlo en cada página. style="…": no, Evítalo; no, No se reutiliza; no, Gana a casi todoCOMPARATIVAArchivo .cssCasi siempreSirve para todaslas páginasSe enlaza con<link><style>Pruebas o unapágina sueltaHay que repetirloen cada páginastyle="…"EvítaloNo se reutilizaGana a casi todo
Los tres sitios donde se puede escribir CSS y cuándo usar cada uno.

Las propiedades que más vas a usar

body {
  font-family: system-ui, sans-serif; /* tipo de letra */
  color: #1f2937;                      /* color del texto */
  background-color: #f8fafc;           /* color de fondo */
  line-height: 1.6;                    /* separación entre líneas */
}

.aviso {
  padding: 1rem;                       /* espacio interior */
  margin-bottom: 1.5rem;               /* espacio exterior, debajo */
  border: 2px solid #f59e0b;           /* borde: grosor, estilo y color */
  border-radius: 8px;                  /* esquinas redondeadas */
}

Lo que va entre /* y */ es un comentario: el navegador lo ignora. Los colores pueden escribirse por su nombre en inglés (green) o en código hexadecimal (#0f766e); con el selector de colores puedes elegirlos y comprobar que el texto se lee bien.

Las medidas más habituales son px (píxeles), rem (relativa al tamaño de letra base de la página, normalmente 16 px) y % (respecto al elemento que lo contiene).

El modelo de caja

Para CSS, cada elemento es una caja con cuatro capas, de dentro afuera:

  1. Contenido: el texto o la imagen.
  2. Relleno (padding): espacio entre el contenido y el borde.
  3. Borde (border): la línea que rodea la caja.
  4. Margen (margin): espacio entre esta caja y las de alrededor.

Casi todos los problemas de «esto está demasiado junto» o «aquí sobra espacio» se resuelven ajustando el padding o el margin.

Cuando dos reglas chocan: la cascada

A menudo varias reglas afectan al mismo elemento. CSS decide cuál gana así:

  • A igualdad, gana la última. Si escribes h1 { color: red; } y después h1 { color: blue; }, el título sale azul.
  • Gana la más específica. Un selector de clase gana a uno de etiqueta, y uno de identificador gana a uno de clase, aunque estén antes.
  • El atributo style gana a casi todo, por eso conviene no usarlo.

Además, algunos estilos se heredan: si pones un tipo de letra en body, todos los elementos de dentro lo usan sin repetirlo.

El modelo de caja: cada elemento tiene cuatro capas.margin (espacio con las cajas de alrededor) / border (la línea que rodea la caja) / padding (espacio entre el borde y el contenido) / Contenido (el texto o la imagen)POR CAPASDe fuera adentromarginespacio con las cajas de alrededorborderla línea que rodea la cajapaddingespacio entre el borde y el contenidoContenidoel texto o la imagen
El modelo de caja: cada elemento tiene cuatro capas.

Cuándo usar CSS (y cuándo no)

  • Usa CSS para todo lo que sea aspecto. No elijas una etiqueta de HTML porque se vea grande o en negrita: un título es un <h2> aunque quieras que se vea pequeño, y lo haces pequeño con CSS.
  • No uses líneas en blanco ni <br> para separar bloques: usa margin.
  • Para probar sin miedo, pulsa F12, elige un elemento y cambia sus valores en el panel Estilos: ves el resultado al momento y no se guarda nada en tus archivos.

Con HTML y CSS ya puedes montar tu primera página web completa. Cuando quieras que reaccione a clics y cambie sola, el siguiente paso es JavaScript.

Fuentes consultadas