Estructura HTML

  
  Page Title
  
  Hello World

Elementos comunes

Texto y encabezados

Heading 1

...

Heading 6

Paragraph text

Bold Italic

Enlaces e imágenes

Link text #section">Anchor link Description

Listas

Item

First

Formularios

Tipos de input

Select y Textarea

HTML semántico

<header>	Contenido introductorio o contenedor de nav
<nav>	Enlaces de navegación
<main>	Contenido principal de la página (uno por página)
<section>	Agrupación temática de contenido
<article>	Contenido autónomo
<aside>	Barra lateral o contenido tangencial
<footer>	Pie de sección o página
<figure>	Imagen/diagrama con leyenda
<figcaption>	Leyenda para

Selectores CSS

Selectores básicos

element	`p { }` — todos los elementos
.class	`.card { }` — selector de clase
#id	`#main { }` — selector de id
*	Selector universal (todos los elementos)

Combinadores

A B	Descendiente (B dentro de A)
A > B	Solo hijo directo
A + B	Hermano adyacente (B justo después de A)
A ~ B	Hermano general (B después de A)

Pseudo-clases

:hover	Ratón sobre el elemento
:focus	El elemento tiene el foco
:first-child	Primer hijo del padre
:nth-child(n)	Hijo n-ésimo (2n = par, odd = impar)

Modelo de caja

.box {
  margin: 10px;           /* exterior */
  border: 1px solid #333; /* borde */
  padding: 15px;          /* interior */
  width: 200px;
  box-sizing: border-box; /* incluye pad+borde */
}

Notación abreviada

margin: 10px	Todos los lados
margin: 10px 20px	Superior/inferior \| izquierda/derecha
margin: 10px 20px 15px	Superior \| izquierda/derecha \| inferior
margin: 10px 20px 15px 5px	Superior \| derecha \| inferior \| izquierda

Flexbox

Contenedor

.flex-container {
  display: flex;
  flex-direction: row;     /* row | column */
  justify-content: center; /* eje principal */
  align-items: center;     /* eje transversal */
  gap: 10px;
  flex-wrap: wrap;
}

Propiedades del elemento

flex: 1	Crecer para llenar el espacio disponible
flex-grow: 2	Ratio de crecimiento relativo a hermanos
flex-shrink: 0	No encoger por debajo de la base
flex-basis: 200px	Tamaño inicial antes de crecer/encoger
align-self: flex-end	Anular alineación del contenedor
order: -1	Orden visual (por defecto 0)

Grid

Contenedor

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;
  gap: 10px;
}

Colocación de elementos

.item {
  grid-column: 1 / 3; /* abarcar col 1-2 */
  grid-row: 1 / 2;
}
/* abreviatura: repeat, minmax */
grid-template-columns: repeat(3, 1fr);
grid-template-columns:
  repeat(auto-fit, minmax(200px, 1fr));

Posicionamiento

static	Flujo por defecto (sin propiedades de offset)
relative	Desplazamiento desde la posición normal
absolute	Desplazamiento desde el ancestro posicionado más cercano
fixed	Desplazamiento desde el viewport (permanece al hacer scroll)
sticky	Relativo hasta el umbral de scroll, luego fijo

Ejemplo

.parent { position: relative; }
.child {
  position: absolute;
  top: 0; right: 0;  /* esquina superior derecha */
}

Media queries

/* Mobile-first: estilos base para pantallas pequeñas */
.container { padding: 10px; }

@media (min-width: 768px) {
  .container { max-width: 720px; }
}
@media (min-width: 1024px) {
  .container { max-width: 960px; }
}

Breakpoints comunes

480px	Teléfonos pequeños
768px	Tablets
1024px	Escritorios pequeños / tablets horizontal
1280px	Escritorios

REFERENCIA RÁPIDA DE HTML Y CSS

Hello World

Heading 1

Heading 6