Cambia el color del texto.

p {
  color: #e11d48;
}

Define el color de fondo de un elemento.

div {
  background-color: #fef3c7;
}

Controla el tamaño de la letra.

h1 {
  font-size: 2rem;
}

Elige el tipo de tipografía (fuente) del texto.

body {
  font-family: Arial, sans-serif;
}

Controla el grosor de la letra (normal, bold, 400, 700, etc.).

strong {
  font-weight: bold;
}

Alinea el texto: left, center, right o justify.

p {
  text-align: center;
}

Espaciado exterior (fuera del borde del elemento).

div {
  margin: 20px;
}

Espaciado interior (dentro del borde, alrededor del contenido).

div {
  padding: 16px;
}

Define el ancho de un elemento.

div {
  width: 200px;
}

Define la altura de un elemento.

div {
  height: 80px;
}

Establece el ancho máximo. El elemento no crecerá más allá de ese valor.

img {
  max-width: 100%;
}

Agrega un borde alrededor del elemento (grosor, estilo y color).

div {
  border: 2px solid #3b82f6;
}

Redondea las esquinas del elemento.

div {
  border-radius: 12px;
}

Agrega una sombra exterior al elemento.

div {
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

Controla cómo se muestra el elemento (block, inline, flex, grid, none...).

div {
  display: flex;
}

Define la dirección de los elementos en un contenedor flex (row o column).

.contenedor {
  display: flex;
  flex-direction: column;
}

Alinea los elementos horizontalmente en un contenedor flex.

.contenedor {
  display: flex;
  justify-content: center;
}

Alinea los elementos verticalmente en un contenedor flex.

.contenedor {
  display: flex;
  align-items: center;
}

Define el espacio entre elementos en flex o grid.

.contenedor {
  display: flex;
  gap: 16px;
}

Define las columnas de un contenedor grid.

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

Controla el tipo de posicionamiento: relative, absolute, fixed, sticky...

div {
  position: relative;
}

Definen las coordenadas cuando se usa position.

div {
  position: absolute;
  top: 10px;
  right: 10px;
}

Controla qué elemento queda encima de otro (profundidad de capas).

.arriba {
  z-index: 10;
}

Controla la transparencia de un elemento (0 = invisible, 1 = opaco).

div {
  opacity: 0.5;
}

Cambia la forma del puntero del mouse al pasar sobre el elemento.

button {
  cursor: pointer;
}

Crea animaciones suaves cuando cambia una propiedad.

button {
  transition: background 0.3s ease;
}

Controla qué pasa cuando el contenido se desborda (hidden, scroll, auto...).

div {
  overflow: hidden;
}

Define cómo se calcula el ancho y alto total (si incluye padding y border).

* {
  box-sizing: border-box;
}

Controla el interlineado (espacio entre líneas de texto).

p {
  line-height: 1.6;
}

Agrega decoraciones al texto: subrayado, tachado, etc.

a {
  text-decoration: none;
}

Sirven para declarar variables. let se puede cambiar, const no.

let nombre = "Ana";
const edad = 25;
nombre = "Luis"; // ok
// edad = 30; → error

Selecciona un elemento del HTML usando su id.

const titulo = document.getElementById("miTitulo");
titulo.textContent = "Nuevo texto";

Selecciona el primer elemento que coincida con un selector CSS (clase, etiqueta, etc.).

const boton = document.querySelector(".mi-boton");
const parrafo = document.querySelector("p");

Escucha eventos (clic, teclado, etc.) y ejecuta una función cuando ocurren.

boton.addEventListener("click", function() {
  alert("¡Clic!");
});

Cambia o lee el texto plano de un elemento (sin HTML).

elemento.textContent = "Nuevo texto";

Permite insertar o leer HTML completo dentro de un elemento.

elemento.innerHTML = "<strong>Negrita</strong>";

Permite cambiar estilos CSS directamente desde JavaScript.

elemento.style.color = "red";
elemento.style.fontSize = "20px";

Agrega una clase CSS a un elemento.

elemento.classList.add("activo");

Quita una clase CSS de un elemento.

elemento.classList.remove("activo");

Alterna una clase: la agrega si no está, o la quita si ya está.

elemento.classList.toggle("oscuro");

Crea una función reutilizable que ejecuta un bloque de código.

function saludar(nombre) {
  return "Hola " + nombre;
}
saludar("Ana"); // "Hola Ana"

Permite ejecutar código según una condición (si se cumple o no).

if (edad >= 18) {
  console.log("Mayor de edad");
} else {
  console.log("Menor de edad");
}

Obtiene o cambia el valor escrito en un input o textarea.

const texto = input.value;
input.value = "Nuevo valor";

Evita el comportamiento por defecto de un evento (por ejemplo, que el formulario recargue la página).

form.addEventListener("submit", function(e) {
  e.preventDefault();
  // código...
});

Convierten texto a número para poder hacer operaciones matemáticas.

const num = parseInt("42");
const decimal = Number("3.14");

Recorre cada elemento de un arreglo y ejecuta una función.

const frutas = ["manzana", "banana"];
frutas.forEach(function(fruta) {
  console.log(fruta);
});

Agrega uno o más elementos al final de un arreglo.

const lista = ["a", "b"];
lista.push("c");
// lista → ["a", "b", "c"]

Guarda datos en el navegador que persisten aunque se cierre la pestaña.

localStorage.setItem("nombre", "Ana");

Lee un dato que fue guardado anteriormente con setItem.

const nombre = localStorage.getItem("nombre");

Ejecuta una función después de cierto tiempo (en milisegundos).

setTimeout(function() {
  alert("Pasaron 2 segundos");
}, 2000);