Teoría
Teoría

Busquemos errores en CSS

La sintaxis de CSS es mucho más simple que la de HTML, pero eso no impide cometer errores molestos.

Claro, uno de los errores más comunes son los errores de escritura en los nombres de las propiedades o en los selectores.

Otro error frecuente es olvidar el ; dentro de una lista de propiedades CSS. Cuando después de una pareja «propiedad-valor» falta el punto y coma, el navegador no aplica ni esa propiedad ni todas las que vienen después.

Al final, Cupcake decidió ajustar los estilos para que el resumen se viera «más bonito». La idea no estaba mal, pero esta vez se distrajo y dejó varios errores de escritura que rompieron algunos estilos.

Y eso nos viene perfecto: ahora tienen una buena oportunidad para practicar la búsqueda de errores en CSS.

1. Línea 8.

2. Línea 17.

3. Línea 27.

index.html
style.css

HTML

<!DOCTYPE html> <html> <head> <title>Busquemos errores en CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Resumen del curso</h1> Etiquetas dobles. Etiquetas individuales. Atributos de las etiquetas. Estilos en línea (integrados). Estilos externos. Estilos por clases. </body> </html>

CSS

body { margin: 30px; font-family: "Georgia", serif; } p { margin: 10px 0; padding: 5px 10px border: 1px solid #cccccc; border-left-width: 10px; color: white; } .completed { border-color: #27ae60; background-color: #2ecc71; text-decoration: linr-through; } .in-progress { border-color: #f39c12; background-color: #f1c40f; } .new { border-color: #c0392b; backround-color: #e74c3c; }

ObjetivosRealizado

Ayuden a Cupcake a corregir los errores en los estilos del resumen:

el primer error, con los estilos perdidos de todos los párrafos,
el segundo error, con el tachado que no aparece en los completados,
y el tercer error, con el fondo perdido de los no completados.