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 1 :
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
Mac.
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">
<head>
<meta charset="utf-8">
<title>Test</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="test.css">
<!-- <style>
p{background-color: hotpink}
</style> -->
</head>
<body>
<app-root></app-root>
<p>This is a test of color</p>
</body>
</html>Comments
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
This is a test of color
Comment posted by Djerry
You need to remove
Comment posted by Djerry
After you remove
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