Problem viewing CSS Box using atom - HTML Preview and Live Server Preview


#1

I’m not able to see the CSS box element using two separate previewer packages in Atom. I am able to see the red text in the preview, so I know the problem is not with all CSS. I don’t run into the problem when putting the code into codepen - it displays correctly. I’m still quite the beginner so I don’t know if there is something I’m totally missing. I have checked for package and software updates and everything is up to date. Any ideas on how to troubleshoot this or how to confirm what the actual issue is? I can only add one photo… so here is a link to the codepen page showing the box.


#2

There’s one important difference: you included a <style> tag in main.css but left it out in CodePen. Don’t have it there at all, since it’s an HTML tag and that’s not an HTML document.

You don’t want to use a slash at the beginning of the stylesheet name, either. It isn’t affecting anything here, but don’t use it. Think of it like a bad habit: you think you’re referring to a file in the same folder when really you’re referring to a file in the webroot (the folder that just starts with /), and that works fine as long as all of your files are in the webroot, but as soon as you have the files in a subdirectory, you’ll lose the stylesheet. So stick with main.css. Here’s a good tutorial about hyperlinks.

You should also acquaint yourself with the Chrome dev tools, which will help you a great deal in attempts to figure out why your page isn’t behaving in the way you think it should.


#3

Hi! Thanks so much for the feedback. Codepen actually throws an error message when you use <style> or <!DOCTYPE> because they have that pre-formatted, I guess. So that’s why I had it included in one and not in the other. So I shouldn’t include the style tags on my style sheet in atom?


#4

No. When you have a CSS document, the browser knows that it’s a CSS document. You don’t need to tell the browser where in the document the CSS is, because the whole thing is CSS.


#5

That makes sense. I’m learning using free online resources, and this is my first time doing something outside of my program’s curriculum (and outside of their main editor - CodePen) so I’m finding lots of seemingly simple things coming up as issues for me, with some things being a lot easier to solve through research than others. I think Chrome dev tools might be my new best friend… haha. Thanks again for your help.


#6

I was there a number of years ago, and since I first got into it, I’ve found a lot of high-quality tutorials emerging, like this one about HTML 5. Most of these are outside of any curriculum, but pick one topic and focus in hard on it.