css file makes unfounded and unknown GET request to a source that does not exist "... 404 (Not Found)"

I am in the process of learning web development and have reached this point thus far:

index.html

<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p>some text</p>
</body>
</html>

styles.css

body {
    color: red;
}

I am running my local web server on the latest Ubuntu and the latest Apache. I just tried to update all packages and everything on this OS and there are no updates. I have tried to reboot and restart the Apache web server but I whenever I open my local 127.0.0.1/index.html file I get this error:

styles.css:1          GET http://127.0.0.1/... 404 (Not Found)

I have tried Chromium and Firefox, both latest and greatest update, and they both yeild the same error in the developer console / inspection tool console.

Why am I getting this error? I have never tried to access "...".

I also have tried

chmod 777 -R *

and

chmod 777 -R .

in the server directory. No change.

I am using Apache on Ubuntu so I am NOT looking for answers for other techonologies nor am I looking for switching technologies.