After experimenting with some basic HTML and CSS, I noticed an interesting behavior. If I remove the comment tags around the style block, the background turns hot pink. However, when I link to the external style sheet, the expected blue color doesn't appear. Both test.html and test.css are located in the same directory.
The browser reports the following error:
test.html:9 GET file:///test.css net::ERR_FILE_NOT_FOUND - Crome on Mac.
I'm fairly new to all of this, but I believe I have a good grasp of what needs to be done here.
.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>