how to add css file to node js(not express) code

Question

How can i add a .css file to my node.js(not express) code? Iam doing a simple beginners code. I tried the following but its not working:

    function start(response) {
    console.log("Request Handler start was called");
    var body = '<html>' + 
               '<head>' +             
               '<link href="style.css" rel="stylesheet" type="text/css">' +
           '</head>' +
           '<body >' +
           '<center><h1>Hello World</h1></center>' +
           '<marquee>Welcome!!!</marquee>'+
           '<br>'+
           '<form action="/upload" method="post">' +
           '<textarea name="text" rows="8" cols="40" ></textarea>' +
           '<input type="submit" value="submit text" />' +
           '</form>' +
           '</body>' +
           '</html>';
    response.writeHead(200,{'Content-Type': 'text/html'});
    response.write(body);
    response.end();
}

and my style.css goes thus:

body { margin-left : 10% ; margin-right : 10% ; margin-top: 10% ; margin-bottom : 10%; background : #D8BFD8; }
h1 { font-weight: bold;color : #8A084B;text-align: center;}
marquee { color:#305d7b; }
p {background: #acbeca; width: 700px; color: black;font-style: italic;}

Mithun Satheesh · Accepted Answer · 2013-09-02 09:52:16Z

2

This wont work as you have not defined the /style.css route in your node app.

You can approach this in two ways.

Embed the css directly in your html file. Then the css will get applied.
Write a new route for /style.css where you output the css file contents to the client and keep your html file as such.

answered Sep 2, 2013 at 9:52

Mithun Satheesh

27.9k14 gold badges80 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user-S Over a year ago

i have tried the first option and it works.but i wanted to know how i can write my css code in a separate file in my computer and use it in my node html code

user-S Over a year ago

i mean similar to how we use css in html.

Krasimir · Accepted Answer · 2013-09-02 09:52:54Z

I'm not sure how your code looks like, but you should have something like this:

var serverHTML = function(res) {
    res.writeHead(200, {'Content-Type': 'text/html'});
    var body = '<html>' + 
       '<head>' +             
       '<link href="/style.css" rel="stylesheet" type="text/css">' +
   '</head>' +
   '<body >' +
   '<center><h1>Hello World</h1></center>' +
   '<marquee>Welcome!!!</marquee>'+
   '<br>'+
   '<form action="/upload" method="post">' +
   '<textarea name="text" rows="8" cols="40" ></textarea>' +
   '<input type="submit" value="submit text" />' +
   '</form>' +
   '</body>' +
   '</html>';
    res.end(body + '\n');
}
var serveCSSData = function(res) {
    res.writeHead(200, {'Content-Type': 'text/css'});
    var css = '\
        body { margin-left : 10% ; margin-right : 10% ; margin-top: 10% ; margin-bottom : 10%; background : #D8BFD8; }\
        h1 { font-weight: bold;color : #8A084B;text-align: center;}\
        marquee { color:#305d7b; }\
        p {background: #acbeca; width: 700px; color: black;font-style: italic;}\
    ';
    res.end(css + '\n');
}
var http = require('http');
http.createServer(function (req, res) {
    switch(req.url) {
        case "/style.css": serveCSSData(res); break;
        default: serverHTML(res);
    }   
}).listen(1337, '127.0.0.1');
console.log('Server running at 127.0.0.1:1337/');

Collectives™ on Stack Overflow

how to add css file to node js(not express) code

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related