Nunca escribas outline: none sin poner nada en su lugar
a:focus { outline: none; } /* NO */
El outline es el recuadro que marca dónde está el foco. Quitarlo deja a quien
navega con teclado sin saber en qué elemento está: es como usar el sitio con el
cursor del ratón invisible.
Si el recuadro por defecto no te gusta, cámbialo, no lo borres.
:focus-visible, el foco solo para el teclado
Con :focus, un botón queda marcado también después de hacer clic con el ratón, y
a veces se ve raro. :focus-visible se aplica solo cuando se llegó con el
teclado:
Es la forma moderna de marcar el foco. Para empezar, :focus está bien; en
Tailwind vas a ver las dos (focus: y focus-visible:).
Escribe siempre los dos juntos
nav a:hover,nav a:focus { color: #12a5ce;}
Lo que se ve con el ratón debe verse también con el teclado. Separando los
selectores con una coma, la misma regla sirve para los dos.
:active, mientras se mantiene pulsado
:active dura solo el instante en que el botón del ratón está apretado, entre que
se presiona y se suelta. Es el “clic” visible.
button:active { background-color: #0a6e88;}
Para qué sirve algo que dura medio segundo
Es la confirmación de que el clic llegó. Sin él, en una conexión lenta el
usuario no sabe si apretó bien y vuelve a hacer clic, enviando el formulario dos
veces.
Los cuatro estados, juntos
nav a { color: #1b1a19; } /* normal */nav a:hover { color: #12a5ce; } /* cursor encima */nav a:focus { outline: 3px solid #12a5ce; } /* foco de teclado */nav a:active { color: #0a6e88; } /* mientras se pulsa */
Estado
Se activa
Con qué se maneja
:hover
El cursor está encima
Ratón
:focus
El elemento tiene el foco
Teclado (Tab)
:active
Mientras se mantiene pulsado
Ratón y teclado
:visited
Un enlace ya visitado
Historial del navegador
Los enlaces tienen además dos estados propios: :link es un enlace que todavía
no visitas, y :visited uno que ya visitaste (el morado que trae el navegador por
defecto).
El orden importa cuando se combinan en un enlace
Si escribes :hover después de :active, el estado de pulsado nunca se ve: el
cursor sigue encima mientras aprietas, y a igual especificidad gana la regla de más
abajo.
El orden que funciona es :link, :visited, :hover, :focus, :active.
Pruébalos sin tocar el ratón
Carga tu página, aparta la mano del ratón y recorre el sitio entero solo con Tab
y Enter. Si en algún momento no sabes dónde estás parado, te falta :focus.
La cascada: cuándo gana cada regla
La C de CSS es de Cascading, en cascada. Explica qué pasa cuando dos reglas
dicen cosas distintas sobre el mismo elemento.
p { color: black;}.destacado { color: red;}
<p class="destacado">¿De qué color soy?</p>
Rojo. Gana la regla más específica.
Qué selector le gana a cuál
MAS FUERTE
^
| #titulo por id 100
| .tarjeta por clase 10
| p por etiqueta 1
v
MAS DEBIL
Si chocan…
Gana
Un id y una clase
El id
Una clase y una etiqueta
La clase
Dos reglas con la misma especificidad
La escrita más abajo en el archivo
"Le puse el color y no me hace caso"
Es la queja número uno de quien empieza, y casi siempre es la cascada. Revisa en
este orden:
¿Hay otra regla más específica pintándolo de otro color?
¿Hay una regla igual más abajo en el archivo que la pisa?
¿Hay un style="…" en el HTML? Ese gana por encima de todo.
En el inspector del navegador las reglas que
perdieron aparecen tachadas: ahí se ve de un vistazo cuál ganó.
Existe !important, y es una trampa
p { color: red !important;}
Salta toda la cascada y gana siempre. El problema es que el siguiente estilo que no
se aplique va a necesitar otro !important, y en dos semanas el archivo es
inmanejable. Si necesitas !important, casi siempre lo que falla es el selector.
El inspector del navegador (F12)
El navegador trae una herramienta para ver qué CSS le llega a cada elemento. Se
abre con F12 (o clic derecho sobre cualquier cosa → Inspeccionar).
Panel
Qué muestra
Para qué lo usas
Elementos
El HTML de la página, como árbol
Seleccionar el elemento que se ve mal
Estilos
Todas las reglas que apuntan a ese elemento
Ver cuál ganó y cuáles perdieron (tachadas)
Caja (Computed)
El dibujo del modelo de caja con sus medidas
Saber cuánto mide de verdad el padding, el border y el margin
Modo dispositivo (Ctrl + Shift + M)
La página en el ancho de un teléfono
Probar el diseño responsivo sin un celular
En el panel de estilos puedes además cambiar valores en vivo: haz clic sobre un
color o un tamaño, escribe otro y mira el resultado al instante. Nada de eso se
guarda en tu archivo; sirve para probar antes de escribir.
Ante la duda, F12 antes que adivinar
Cuando un estilo no se aplica, selecciona el elemento y mira el panel de estilos:
Si tu regla no aparece, el selector no apunta a ese elemento (o el CSS no
está enlazado).
Si aparece tachada, otra regla le ganó, y justo encima está cuál.
Si aparece con un ícono de advertencia, el valor está mal escrito.
Propiedades del texto
Propiedad
Qué hace
Ejemplo
color
El color del texto
color: #e03131;
font-size
El tamaño de la letra
font-size: 40px;
font-family
La tipografía
font-family: Archivo, sans-serif;
font-weight
El grosor: 400 normal, 700 negrita
font-weight: 700;
line-height
El espacio entre líneas
line-height: 1.5;
text-align
Alinea dentro de su caja: left, center, right
text-align: center;
text-transform
Mayúsculas o minúsculas sin tocar el HTML
text-transform: uppercase;
text-decoration
El subrayado. none lo quita
text-decoration: none;
font-family siempre lleva respaldo
font-family: Archivo, sans-serif; (si la primera no está disponible, el
navegador usa la siguiente). La última siempre es una genérica: sans-serif,
serif o monospace.
line-height: 1.5 es el cambio que más se nota
Un párrafo con las líneas pegadas cansa la vista. Subirlo a 1.5 mejora la lectura
más que cualquier otra propiedad, y cuesta una línea.
Va sin unidad: 1.5 significa “vez y media el tamaño de la letra”, así que se
ajusta solo si cambias el font-size.
text-decoration: none quita el subrayado de los enlaces
Los <a> vienen subrayados por defecto. En un menú sobra, porque ya se entiende
que son enlaces; dentro de un párrafo conviene dejarlo, porque ahí el subrayado
es lo que distingue el enlace del texto normal.
Fondo, bordes y tamaño
Propiedad
Qué hace
Ejemplo
background-color
El color de fondo de la caja
background-color: #e2f3f9;
border
Grosor, estilo y color, juntos
border: 3px solid #12a5ce;
border-radius
Redondea las esquinas
border-radius: 12px;
width / height
Ancho y alto de la caja
width: 220px;
padding
Relleno interno
padding: 24px;
margin
Espacio exterior
margin: 16px;
padding y margin son el corazón del modelo de caja, y tienen su propia página.
background-color pinta la caja, no el texto
Es el error de lectura más frecuente al empezar: el fondo cubre todo el rectángulo
del elemento, incluido el padding. El color del texto es color.
Cómo se escriben los valores
Colores
Forma
Ejemplo
Cuándo
Por nombre
red, blue
Rápido para probar. Son pocos y poco precisos
Hexadecimal
#12a5ce
El más usado: control exacto, se copia del diseño
rgb()
rgb(242, 106, 27)
Por cantidad de rojo, verde y azul
Cómo leer un hexadecimal
#12a5ce son tres pares: 12 de rojo, a5 de verde, ce de azul, cada uno
de 00 a ff. Por eso #000000 es negro y #ffffff es blanco.
Cuando los tres pares tienen sus dos cifras iguales se puede abreviar:
#ffffff es #fff.
Medidas
Unidad
Qué significa
Ejemplo
px
Tamaño fijo en píxeles
font-size: 24px;
%
Relativo al contenedor
width: 50% es la mitad del ancho del padre
rem
Relativo al tamaño de letra de la página
font-size: 1.5rem; son 24 px
1rem son 16 px, y es la base de Tailwind
El navegador parte con una letra de 16 px, así que 1rem = 16px, 2rem = 32px
y 0.5rem = 8px. La ventaja: si el usuario agranda la letra en su navegador, todo
lo que está en rem crece en proporción, y la página sigue legible.
Toda la escala de espacios de Tailwind está en rem: p-4 es 1rem, o sea
16 px.
No hay que memorizar las propiedades
Son cientos y nadie se las sabe todas. Lo que hay que tener claro es el formato
(propiedad: valor;) y dónde buscarlas: MDN Web Docs es la referencia, y
buscar en español “mdn css border-radius” siempre llega.
Checkpoint
Intenta responder antes de desplegar cada pregunta.
¿En qué se diferencian los selectores por etiqueta, clase e id?
Etiqueta (p { }) (apunta a todos los elementos de ese tipo).
Clase (.destacado { }) (a los que lleven class="destacado"). Se puede
repetir en todos los elementos que quieras.
Id (#titulo { }) (al único elemento con ese id).
En la práctica se usan clases casi siempre.
¿Qué apunta .tarjeta h2?
A los h2 que estén dentro de un elemento con class="tarjeta". El espacio
entre dos selectores significa “dentro de”, y los h2 de fuera no se ven
afectados.
Si p { color: black; } y .destacado { color: red; } apuntan al mismo párrafo, ¿de qué color queda?
Rojo: gana la regla más específica, y una clase es más específica que una
etiqueta. El orden de especificidad es id > clase > etiqueta, y entre dos reglas
igual de específicas gana la escrita más abajo.
Pusiste un color y el elemento no cambia. ¿Qué revisas?
Seleccionas el elemento con F12 y miras el panel de estilos:
Si tu regla no aparece, el selector no apunta a ese elemento (o el CSS no
está enlazado).
Si aparece tachada, otra regla le ganó: una más específica, una igual
más abajo en el archivo o un style="…" en el HTML.
Si tiene un ícono de advertencia, el valor está mal escrito.
¿Qué propiedades usarías para el color del texto, el fondo y el tamaño de letra?
color para el texto, background-color para el fondo de la caja y font-size
para el tamaño de la letra.
Ojo con la confusión clásica: background-color pinta todo el rectángulo del
elemento, no el texto.
¿Qué hacen :hover, :focus y :active, y con qué se activa cada uno?
:hover se aplica mientras el cursor está encima. Se activa con el ratón.
:focus se aplica al elemento que tiene el foco, el que recibe lo que
escribas. Se llega a él con Tab.
:active dura solo el instante en que se mantiene pulsado. Confirma que el
clic llegó.
nav a:hover,nav a:focus { color: #12a5ce;}nav a:active { color: #0a6e88;}
:hover y :focus se escriben siempre juntos: lo que se ve con el ratón tiene que
verse también con el teclado.