Para hacerlo de la forma que estás haciendolo, debes identificar el tipo de archivo solicitado y trabajar sobre los headers, el css lo invocas desde el html de la siguiente manera ej:
<link rel="stylesheet" href="styles.css">
Entonces cuando se llame a "/", lo primero agregará el content-type: text/html, cuando el html intenta llamar al archivo css, detecta que la url hace un match con .css y agrega el header correspondiente y así consecutivamente, en el ejemplo también está hecho para que funcionen archivos .js, y está programado para que tanto los js como los css estén dentro de una carpeta de nombre "public" que debe estar en el mismo lugar que el index.html.
Código server.js
const http = require("http");
const path = require("path");
const fs = require("fs");
const host = "localhost";
const port = 8000;
const HTML_CONTENT_TYPE = "text/html";
const CSS_CONTENT_TYPE = "text/css";
const JS_CONTENT_TYPE = "text/javascript";
const PUBLIC_FOLDER = path.join(__dirname, "public");
const requestListener = function (req, res) {
const { url } = req;
let statusCode = 200;
let contentType = HTML_CONTENT_TYPE;
let stream;
// si estamos pidiendo la ruta principal, devolvemos el contenido del index.html
if (url === "/") {
stream = fs.createReadStream("index.html");
} else if (url.match(".css$")) {
// para los archivos CSS
contentType = CSS_CONTENT_TYPE;
stream = fs.createReadStream(`${PUBLIC_FOLDER}${url}`);
} else if (url.match(".js$")) {
// para los archivos JavaScript
contentType = JS_CONTENT_TYPE;
stream = fs.createReadStream(`${PUBLIC_FOLDER}${url}`);
} else {
// si llegamos aquí, es un 404
statusCode = 404;
}
// escribimos las cabeceras de la respuesta dependiendo de la request
res.writeHead(statusCode, { "Content-Type": contentType });
// si tenemos un stream, lo enviamos a la respuesta
if (stream) stream.pipe(res);
// si no, devolvemos un string diciendo que no hemos encontrado nada
else return res.end("Not found");
};
const server = http.createServer(requestListener);
server.listen(port, host, () => {
console.log(`'app funcionando en el puerto 8000 http://${host}:${port}`);
});
La otra opción es utilizar express, lo cual simplifica mucho el trabajo, para esto tu código debería quedar algo así:
//Lo utilizaremos para la ruta del index y el static del public
const path = require("path");
const express = require("express");
//Nuestro server será manejado ahora por express
const app = express();
const host = "localhost";
const port = 8000;
//Definimos la carpeta public como estática, ahora podemos poner en ella lo necesario, css, js, imagenes, etc.
app.use(express.static("public"));
//Definimos ruta utilizando express
app.get("/", function (req, res) {
//Enviamos el index.html al browser.
res.sendFile(path.join(__dirname + "/index.html"));
});
//Escuchamos server
app.listen(port, host, () => {
console.log(`'app funcionando en el puerto 8000 http://${host}:${port}`);
});
Aquí también está escrito de forma tal que en el mismo lugar que el "index.html" tengamos una carpeta "public" con el archivo .css adentro.
Y también debemos invocar el archivo css desde el index.html como indico al principio de la respuesta.
Espero te sea de ayuda, cualquier cosa estoy a las ordenes.