title: Simple node.js server that sends html+css as response
body: <p>I've created basic http server that sends html file as response. How can I send css file as well so client using browser will see a html using css ?</p>
  
  <p>The code I have:</p>
  
  <pre><code>var http = require('http');
  
  var fs = require('fs');
  var htmlFile;
  
  fs.readFile('./AppClient.html', function(err, data) {
      if (err){
          throw err;
      }
      htmlFile = data;
  });
  
  
  
  var server = http.createServer(function (request, response) {
        response.writeHead(200, {"Content-Type": "text/html"});
        response.end(htmlFile);
      });
  
  //Listen on port 8000, IP defaults to 127.0.0.1
  server.listen(8000);
  
  
  console.log("Server running at http://127.0.0.1:8000/");
  </code></pre>
  
  <p>What I have tried(it seems it does not work - client sees only css file content here):</p>
  
  <pre><code>var http = require('http');
  
  var fs = require('fs');
  var htmlFile;
  var cssFile;
  
  fs.readFile('./AppClient.html', function(err, data) {
      if (err){
          throw err;
      }
      htmlFile = data;
  });
  
  fs.readFile('./AppClientStyle.css', function(err, data) {
      if (err){
          throw err;
      }
      cssFile = data;
  });
  
  var server = http.createServer(function (request, response) {
        response.writeHead(200, {"Content-Type": "text/css"});
        response.write(cssFile);
        response.end();
  
        response.writeHead(200, {"Content-Type": "text/html"});
        response.write(htmlFile);
        response.end();
      });
  
  //Listen on port 8000, IP defaults to 127.0.0.1
  server.listen(8000);
  
  
  console.log("Server running at http://127.0.0.1:8000/");
  </code></pre>
  
  <p>html file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Insert title here&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="AppClientStyle.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;div class=middleScreen&gt;
  
  &lt;p id="p1"&gt;Random text&lt;/p&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>css file :</p>
  
  <pre><code>@CHARSET "UTF-8";
  
  .middleScreen{
      text-align:center;
      margin-top:10%;
  }
  </code></pre>
  
  <p>I don't want to use express here(it is just for learning purpose)</p>