Theory
Theory

Looking for errors in CSS

CSS syntax is much simpler than HTML syntax, but that doesn't stop you from making annoying mistakes.

Of course, some of the most common mistakes are typos in property names or selectors.

Other common errors include the absence of ; in the list of CSS properties. When you forget to put a semicolon after a property-value pair, the browser doesn't apply that property or all subsequent properties.

Cupcake decided to do some final work with styles to make the outline "prettier". It worked well, but this time Cupcake was careless and made some annoying typos that broke some of the styles.

Well, that's great! Now you can practice finding errors in CSS!

1. Line 8.

2. Line 17.

3. Line 27.

index.html
style.css

HTML

<!DOCTYPE html> <html> <head> <title>Looking for errors in CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Course outline</h1> Paired tags. Single tags. Tag attributes. Inline styles. External Styles. Styling by class. </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; }

GoalsCompleted

Help Cupcake correct errors in outline styles:

First error with lost styles for all paragraphs,
second error with no strikethrough for completed items,
third error with missing background of uncompleted ones.