Newbie’s Guide to why your CSS might not be updating

When I first started a bootcamp course, literally the very beginning of me learning HTML and CSS, I spent one night frustrated as hell that my CSS wasn’t working. No matter what I did, my page didn’t have any formatting. Ultimately, I found out that my CSS file was in the wrong place, and I was annoyed that I spent the whole night over something so stupid.

So, here’s my simple way of helping beginners figure out why their CSS might not be working (besides not actually saving the file, which happens to me all the time).

home2.png

There are SO MANY REASONS that your CSS might not be working.

NONE of it is working

If none of your CSS is working, odds are that you’re having an issue with linking your HTML and CSS files.

(#2) You have to link your CSS file properly. Some lessons don’t really explain the whole folder and location thing.

cssfolders1.png

 

You can have your html and CSS files just sitting in the same folder for your project, no problem. It’s better if you get used to putting it in a folder within your project’s folder, though. As you go along, you might have a bunch of css files, so it’s just a way of keeping them together. If you do put it in a folder, you have to put the name of the folder before the name of the file, like “css/sample.css”. It’s important to note that you don’t HAVE to name your file “CSS” – it just makes the most sense though, so that pops up a lot. You could name it “pizza” and then you’d have to put “pizza/sample.css”.

(#3) For some reason, there was a time when I was working on things and somehow I saved a new CSS file with the same name but in a different location. So I was doing all this work but nothing was changing. Check your computer for any files with the same name or go to your file editor and your CSS file, click “Save As” and see where it’s saving. It may not be where you think.

SOME of it is working

If some of your CSS isn’t working, like you just added one thing but it’s not showing up, it could be that something minor is missing like a (#4) semi-colon or (#5) bracket.

Or maybe you (#6) used . with a id instead of #. I’ve done that and it’s the tiniest thing to miss. Or maybe  (#7) you thought you saved the class as one thing but it’s actually another. Or you spelled it wrong 

It could also be that (#8) whatever you’re coding isn’t working with the rest of the page – that could especially be true with positioning. If it’s changing a color, it’s probably something related to the whole file.

The bottom line

All of these things are SUPER common when you’re just starting out with CSS. They seem so silly when you figure them out, but it’s normal. I’ve literally done ALL of them. Don’t beat yourself up – you’ll learn to recognize them in no time.

Meghan Kelly