Solution 1 :

When trying to style “.p”, you are referring to an object with class name “p”. Just remove the dot before the p, and your problem will be solved!

Solution 2 :

Your problem can be solved by removing base tag from html document. In this case base tag messed things up and changed your link tag attribute “href” to “/” and that is why you get a reference error and the browser cannot find your test.css file.

Problem :

I have this simple HTML and CSS below. If I uncomment the style inside I get hotpink. When the link to the style sheet is used I do not get blue.
The test.html and test.css are in the same directory.

The browser error is:

test.html:9 GET file:///test.css net::ERR_FILE_NOT_FOUND – Crome on

New to all this, but I have good understanding of what I should be doing I think.

.p {
  background-color: blue;
<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="test.css">
<!-- <style>
    p{background-color: hotpink}
</style> -->

  <p>This is a test of color</p>


Comment posted by j08691

Error aside, your CSS is incorrect.

Comment posted by esqew

@j08691 Mind rolling back your edit? I think you may have stripped some key context from the original HTML that was provided, specifically the

Comment posted by Igor Popov

Does your test.css stored in the root of your drive? Cause base-href + link-href leads to “/test.css”. I believe you run just HTML file, not like from local web-server.

Comment posted by M Laursen

Djerry; I hope I understood you correctly. I added the “/’ before the name, yet I still received the error in the WB Mars – Complete Computing

This is a test of color

Comment posted by Djerry

You need to remove tag from the code. The problem is that the tag specifies the base URL/target for all relative URLs in a document. In your case it means that it changes your link href into “/” and the browser cannot understand it because you are pointing to a directory but not a file

Comment posted by Djerry

After you remove you can specify the root to your css file in a link tag like this: or: and it is going to work both ways since your css file is in a same directory

Comment posted by M Laursen

Djerry; Thank you!! I now have the style sheet working as an external file. I started with a copy of web page, did not realize that was there. Thank you again. Mark