×
Course: Welcome

Error correction [13/14]

CSS syntax is much easier than that of HTML, but it does not prevent us from making annoying mistakes. We have already dealt with mistakes in HTML; let’s have a look at the mistakes in CSS now.

Of course, the most frequent mistakes are typos in attribute and selector names.

Another common mistake is absence of ; in the list of CSS attributes. When a semicolon is missing after a “property-value” pair, the browser renders neither this rule, nor any following ones.

When the summary layout was almost over, coach Muffin like a furry comet sprang up to the computer and decided to play with the styles to make the summary prettier. It looked good, but this time coach Muffin was half asleep and made some typos that ruined some styles.

… which is great! You have a chance to practice in searching mistakes in CSS now!

Hint

1. Line 7.

2. Line 14.

3. Line 26.


Do it
HTML
<!DOCTYPE html> <html> <head> <title>Error correction</title> </head> <body> <h1>Course summary</h1> <p class="learned-ok">Paired tags.</p> <p class="learned-ok">Single tags.</p> <p class="learned-ok">Tag attributes.</p> <p class="learned-ok">Inline (built in) styles.</p> <p class="learning-in-progress">Outer styles.</p> <p class="not-learned">Styling by class.</p> </body> </html>
CSS
body { font-family: Georgia, serif; } p { margin: 10px 0; padding: 5px 10px color: white; border: 1px solid #ccc; border-left-width: 10px; } .learned-ok { text-decoration: linr-through; border-color: #27ae60; background-color: #2ecc71; } .learning-in-progress { border-color: #f39c12; background-color: #f1c40f; } .not-learned { border-color: #c0392b; backround-color: #e74c3c; }
HTML Academy

Help coach Muffin correct the mistakes in the summary styles:

  1. First mistake with lost styles for all the paragraphs.
  2. Second mistake – absence of line through on the learned lessons.
  3. Third mistake of lost background in not learned yet lessons.
Theory Check Next