Css not working or where did I make a mistake

Hi, I am a total beginne, still learning. I have 2 files and the text should appear with dark background and white font in browser, but it doesn’t. I can’t figure out why, could someone please have a look please!

Can you show the output you’re getting?

can u put the color attribute on p tag [or use a < span > for text - that’s better] and let the background-color tag remain on box-1.

Make space between css separator and his value like this:
body {color: red;}

double check the .css filename that you are linking with your html Vs the actual filename.
It has caused me heartache in the past

this is what is showing in browser. Also it looks liek margins are not showing correctly

Ok so that is something I was not sure about (naming of files). The 2 files are in notepad. I changed the css file name to star/style.css but in the browser, the index file is still showing not on black background as it should. This is a snip of my notepad files - is star/style.cs the correct name for linking the style.css file?

File names are case sensitive! Your file is Style.CSS but the link points to style.css. If you rename your file to lowercase that should probably work

I put a space between colon and color name/code, but that didn’t change anything in browser output. This is very frustrating, I am following exactly what the professor has in his css course on yt - and I am not getting what he is getting

I didn’t know that. I changed the name of the css file from"Style.CSS" to “style.css”, and I adjusted the file name in index file link to style.css. Still, same problem persists. In browser, the text is dark gray on whitish background as in the photo I posted above. While it should be white text on black background. it looks like browser is ignoring box-1 and container instructions. why is that happening

This helped as far as output. When I moved font color attribute to body tag, and left just background 333 oin box 1, the color of font in browser output changed to white. but background remained light grey f4f4f4 so that text was barely readable. So I also changed background color in body to what is in box 1, namely to 333. So now what is in the browser is what the css teacher is showing in his lesson. However, why is it happening? why is browser ignoring my instructions for box 1?

I don’t know what is yet, I am just a beginner, doing css crash course on yt. But do you mean that box 1 is not used in coding any more? this crash course I am taking is from 2017- has something changed since then?

not sure which course u r taking but the result u got means that color is not inheritable from container to child node.
the simple thing to do is put the text in < span > and have an id on it . then color it whatever u want. also add background-color property and u shud be gud.
let me know if it works.

Keep the path like it was, but with the corrected case for the file name.

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

Or (shouldn’t really matter)

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

I would suggest you create an account on Codepen and share the link to whatever code you need help with. Also, if your code works on Codepen but not locally we now know there is some issue specific to the local setup.

  1. Get VS Code, I don’t suggest using notepad.

  2. Install the Live Server extension and serve the page using it. That also gives you live reloads so when you make changes and save you see it automatically.

I am watching css crash course from traversy media on yt. It looks like this code is working for the teacher, but not for me. Maybe the problem is my computer. The teacher wanted us to open the new file by right clicking on the screen, but this doesn’t work with my pc (it’s old, tried but couldn’t fix that) so I created these files with notepad and then opened them with sublime text as instructed. I try to finish this video, see if other stuff will work, if it doesn;t I 'll do something else. Thank you !

It didn’t work. Maybe my pc is the problem. I will open accounts with codepen , vs code and live server and see if it makes things better. Thank you

It’s very hard to troubleshoot local issues remotely using just screenshots.

I did notice you have a syntax error on the div with the container class in the HTML.

It should be…

<div class="container">


<div class="container>" (notice the position of the >).

1 Like

OMG that was it! now the background is black as it is supposed to be. THANK YOU!

1 Like

Great, happy to help.

I didn’t even notice it at first. This is why using images is usually a bad idea, it makes it much harder to debug code.

If you want to post code the forum allows for it and has a format function.

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

OK thank you so much , I have saved your post for future reference. I am sure I will be back soon!