Why is my CSS not working

Did you have a problem that your CSS is not working? No matter how many changes you make - big or small - it just doesn’t work at all?

In that case, some underlying problem prevents you from applying CSS to your web page. And this article will help you troubleshoot the problem.

Here are some possible explanations for why your CSS is not working.

The CSS file isn’t linked to the HTML document

The first reason why CSS may not be working is that you may not have linked the external style sheet to the HTML file.

Perhaps you forgot to add the code that connects the CSS file to the HTML file, and that’s why no styles are applied to the web page.

In the head section of the HTML file, check if an external style sheet code is there:

<link rel="stylesheet" href="style.css">

If you can’t find this code anywhere in your HTML document, then that’s probably the root cause of the issue. Having no external style sheet means no CSS changes can be applied to the web page.

The style.css should be replaced with the actual name of your CSS file

Wrong name of the CSS file

Another possible reason why CSS is not working is that you may have put the wrong name of the CSS file.

For example, if your file name is styles.css, but you entered style.css instead. In this case, it won’t work since the browser is unable to recognize the name of the file. Therefore, always make sure to check if the name of the CSS file is entered correctly.

It is also possible that there is a typo either in the CSS filename or in the external style sheet code, which might prevent the CSS changes from taking effect.

Editing in the wrong file

One last possible reason CSS is not working is that you may be editing in the wrong file. This mistake is more profound on larger projects where you have lots of files with similar names.

Check the name of the CSS file carefully and if it’s connected to the correct HTML file. You may have been coding on the wrong file the entire time!

Do not feel bad if you make these silly mistakes. It happens to the best of us, even the veteran programmers.

Wrapping up

I hope this article has helped you solve the problem.

The next time the issue appears, you now know how to fix them, and that’s all matters.

Get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript.