Chuleta | HTML y CSS desde cero

Esqueleto de una página

html

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título de la pestaña</title>
    <link rel="stylesheet" href="estilos.css">
  </head>
  <body>
    <!-- Todo lo visible -->
  </body>
</html>

HTML: texto

Etiqueta	Para qué	Lección
`<h1>` … `<h6>`	Encabezados, del más al menos importante. Un solo `<h1>`	04
`<p>`	Párrafo	04
`<strong>`	Texto importante (negrita)	04
`<em>`	Énfasis (cursiva)	04
`<br>`	Salto de línea dentro de un párrafo	04
`<hr>`	Cambio de tema (línea horizontal)	04
`<!-- … -->`	Comentario	04
`<` `>` `&`	Los caracteres `<`, `>` y `&`	04

HTML: listas, enlaces e imágenes

Etiqueta	Para qué	Lección
`<ul>` + `<li>`	Lista sin orden (viñetas)	05
`<ol>` + `<li>`	Lista ordenada (números)	05
`<a href="…">`	Enlace. `#id` para ir a una parte de la página; `mailto:` para correo	05
`<img src="…" alt="…">`	Imagen, siempre con `alt`	06
`<figure>` + `<figcaption>`	Imagen con pie de foto	06
`<video controls>` / `<audio controls>`	Vídeo y audio	06

HTML: estructura

Etiqueta	Para qué	Lección
`<header>`	Cabecera	07
`<nav>`	Menú de navegación	07
`<main>`	Contenido principal (solo uno)	07
`<section>`	Parte temática con su encabezado	07
`<article>`	Contenido independiente: post, noticia, producto	07
`<aside>`	Contenido secundario	07
`<footer>`	Pie	07
`<div>` / `<span>`	Cajas sin significado (bloque / en línea)	07

HTML: tablas y formularios

Etiqueta	Para qué	Lección
`<table>` `<tr>` `<th>` `<td>`	Tabla, fila, celda de cabecera, celda de datos	08
`colspan` / `rowspan`	Celda que ocupa varias columnas / filas	08
`<form>`	Formulario	09
`<label for="id">`	Etiqueta de un campo	09
`<input type="…" name="…">`	Campo: `text`, `email`, `password`, `number`, `date`, `checkbox`, `radio`…	09
`<textarea>`	Texto de varias líneas	09
`<select>` + `<option>`	Desplegable	09
`<button type="submit">`	Botón de enviar	09
`required`, `minlength`, `min`, `max`	Validación sin programar	09

CSS: sintaxis y selectores

css

selector {
  propiedad: valor;
}

Selector	Selecciona	Lección
`p`	Todos los párrafos	10
`.aviso`	Los elementos con `class="aviso"`	11
`#portada`	El elemento con `id="portada"`	11
`h1, h2`	Los `h1` y los `h2`	11
`nav a`	Los `a` que están dentro de un `nav`	11
`.boton.grande`	Elementos con las dos clases	11
`a:hover`, `a:focus`	Enlace con el ratón encima / con el foco	11
`li:nth-child(even)`	Los `li` pares	11
`*`	Todos los elementos	13

Especificidad: etiqueta < clase < id < style. A igualdad, gana la última regla.

CSS: color y texto

Propiedad	Ejemplo	Lección
`color`	`color: #333;`	12
`background-color`	`background-color: rgb(0 0 0 / 50%);`	12
`font-family`	`font-family: "Poppins", sans-serif;`	12
`font-size`	`font-size: 1.25rem;`	12
`font-weight`	`font-weight: bold;`	12
`line-height`	`line-height: 1.6;`	12
`text-align`	`text-align: center;`	12
`text-decoration`	`text-decoration: none;`	12
`text-transform`	`text-transform: uppercase;`	12

CSS: el modelo de caja

Propiedad	Ejemplo	Lección
`padding`	`padding: 10px 20px;` (vertical, horizontal)	13
`margin`	`margin: 0 auto;` (centra un bloque con ancho)	13
`border`	`border: 2px solid black;`	13
`border-radius`	`border-radius: 12px;` · `50%` para un círculo	13
`width` / `max-width`	`max-width: 700px;`	13
`box-sizing`	`* { box-sizing: border-box; }`	13
`display`	`block`, `inline`, `inline-block`, `none`, `flex`, `grid`	14

Cuatro valores: arriba, derecha, abajo, izquierda (como las agujas del reloj).

CSS: Flexbox

css

.contenedor {
  display: flex;
  justify-content: space-between; /* eje principal */
  align-items: center;            /* eje cruzado */
  gap: 16px;
  flex-wrap: wrap;
}

Propiedad	Valores	Lección
`flex-direction`	`row`, `column`	15
`justify-content`	`flex-start`, `center`, `flex-end`, `space-between`, `space-evenly`	15
`align-items`	`stretch`, `flex-start`, `center`, `flex-end`	15
`flex: 1` (en un hijo)	Crece para ocupar el espacio libre	15

CSS: Grid

css

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

Propiedad	Ejemplo	Lección
`grid-template-columns`	`200px 1fr` · `repeat(3, 1fr)`	16
`grid-column`	`grid-column: span 2;`	16
`grid-row`	`grid-row: span 2;`	16

CSS: responsive

css

img {
  max-width: 100%;
  height: auto;
}

/* Mobile first: esto se añade a partir de 768px */
@media (min-width: 768px) {
  .menu {
    flex-direction: row;
  }
}

Y siempre, en el <head>: <meta name="viewport" content="width=device-width, initial-scale=1.0"> (17).

Atajos útiles

Acción	Windows / Linux	Mac
Guardar	Ctrl + S	Cmd + S
Esqueleto HTML en VS Code	`!` + Tab	`!` + Tab
Comentar líneas	Ctrl + /	Cmd + /
Abrir las DevTools	F12	Cmd + Opción + I
Modo dispositivo	Ctrl + Mayús + M	Cmd + Mayús + M
Ver código fuente	Ctrl + U	Cmd + Opción + U

#Chuleta de HTML y CSS#Chuleta de HTML y CSS