15 Common CSS Mistakes

CSS can make a webpage pop, but if it’s coded wrong, you won’t like the results. Improperly coded CSS could cause you page to render differently than you expect or could simply fail to make any of the changes you were wanting. If your CSS isn’t working correctly, look for these common errors:

• Is everything spelled correctly? Just like HTML, CSS won’t work if you’ve spelled something wrong. This is the simplest and often first step when trouble shooting.
• Do you have a selector? Remember, the selector is the first part of CSS and tells the code what part of the HTML a rule is applied to. Both inline and embedded CSS need a selector.
• Did you remember both brackets? Forgetting to put the { after your selector or the } after your embedded CSS rule is easy to do, but it will cause your rule to break.
• Did you remember the colon after the property? CSS rules need to be written as property: value. Missing the colon will cause your CSS to render improperly or not at all.
• Do you have a semi-colon after your value? Just like the property portion needs a colon, the value needs a semi-colon. Think property: value;. This way, if you have multiple values in a rule, they are all cleanly defined.
• Did you provide a fallback font? If the font isn’t displaying as you intended, there could be a few things wrong. You might have spelled the font wrong, so check that first. If that still doesn’t work and the rule is written correctly, it could be that your browser doesn’t support that font. Try checking in a few other browsers. If your desired font renders there, your problem is likely that you didn’t provide a fallback font. Remember, the fallback font tells the browser what font to use if it doesn’t have access to the first requested option.

CSS is more likely the realm of web publishers or designers, not digital writers, but knowing a bit can help you do your job more effectively. If you are still having trouble, reach out to a CSS professional.