CSS — Teoría y Cuestionario

Externo (recomendado)

<link rel="stylesheet" href="estilos.css">

Interno / Inline

<style>h1{ color: #1f2937; }</style>

<h1 style="color:#1f2937;">Título</h1>

Selectores básicos

• h1 (de tipo), .clase (de clase), #id (de ID).
• Combinadores: div p (descendiente), div>p (hijo), h1 + p (adyacente).

Especificidad (simplificada)

• Inline > ID > Clase/atributo/pseudoclase > Tipo/pseudoelemento.
• La cascada resuelve empates por origen y orden.

Box model

• Contenido → padding → border → margin.
• box-sizing: border-box; facilita layouts predecibles.

Display y posicionamiento

• display: block | inline | inline-block | flex | grid
• position: static | relative | absolute | fixed | sticky

Flexbox

.fila{ display:flex; gap:12px; justify-content:space-between; align-items:center; }

Grid

.grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }

Colores y fuentes

• Color: #1f2937, rgb(31,41,55), hsl(215 19% 35%).
• Fuente: font-family, font-size, font-weight, line-height.

Media queries

@media (max-width: 600px){

  .grid{ grid-template-columns:1fr; }

}