Our community has had a great time solving our spot the mistakes challenges, so we thought we’d keep it rolling with another one.
This time, we’ll be setting our sights on CSS. See if you can spot the 6 mistakes in our code.
Let us know on socials if you spot them, or check out the answers at the end of the article.
The Code
body {
font-family: "Helvetica Neue", sans serif;
background-colour: #f9f9f9;
margin 0;
}
h1 {
color: lightnavy;
margin-top: 1em;
}
p {
line-height: 150%;
max-width: 600px
font-size: 1.1rem;
text-align: justified;
}
a {
text-decoration: none;
color: #00f;
hover-color: red;
}
The Answers
Think you’ve found the answers? See if you found them all below.
Mistake 1
Incorrect font family keyword
The value sans serif is invalid—CSS requires a hyphen: sans-serif.
Mistake 2
Incorrect property name
background-colour is not valid CSS. The correct property is spelled background-color.
Mistake 3
Missing colon in property
The line margin 0; is missing a colon and should be margin: 0;.
Mistake 4
Nonexistent CSS color name
lightnavy might sound real, but it’s not a valid CSS color. Use something like lightblue or #336699 instead.
Mistake 5
Missing semicolon after property
In the p selector, there's no semicolon after max-width: 600px. This breaks the next line font-size from being parsed correctly.
Mistake 6
Invalid hover property syntax
hover-color is not a real CSS property. To change color on hover, use a pseudo-class:a:hover { color: red; }