Linking CSS to HTML background color

Question

I am using node.js to run a local website and am having trouble linking the css to html.

The html is:

<!DOCTYPE html>
<html>

<head>
    <title> Name </title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="style.css" />

</head> 


<body id="background">
    <h1> My Website </h1>
    <span style="float:right">
    <a href = "https://google.com/"> Google </a>
    </span>
</body>

and css is:

#background {
  background-color: #0099FF;
}

I have not been able to view the effects of the css on the website and am not able to change the background color.

I have checked online resources and it seems as if the syntax is correct. The css file style.css is in the same directory as the html. The html is working on the local website but not the css.

update: i am adding the app.js file

var http = require('http'),
    fs = require('fs');


fs.readFile('./header.html', function (err, html) {
    if (err) {
        throw err; 
    }       
    http.createServer(function(request, response) {  
        response.writeHeader(200, {"Content-Type": "text/html"});  
        response.write(html);  
        response.end();  
    }).listen(8080); 
});

Are you using expressjs? If so, you will need to create a folder for your public facing file (like css, javascript, or images), then configure your app to use it. If you wanted your public folder to be names 'public' then you would have create the folder in your directory, then in your app set **app.use(express.static(path.join(__dirname, 'public')));** — Joe Lissner, Mar 28 '17 at 23:58
try adding an anchor tag and href="style.css" . If the browser navigates and you see your css content, it means your local server is working. If you are not running a server type file://.......absolute path to css stylesheet.... in your browser... — repzero, Mar 29 '17 at 00:01
When I look in chrome and inspect the website and navigate to the style.css file it just shows me the html file so it may be a browser issue where it can not identify the css. I will try the anchor tag. Also I updated the post to include the app.js file. I am not using expressjs as far as I know but am new to this topic so not sure — , Mar 29 '17 at 00:06
I found this error message: Resource interpreted as Stylesheet but transferred with MIME type text/html — , Mar 29 '17 at 00:08

score 0 · Answer 1 · answered Mar 29 '17 at 00:02

0

Your syntax looks correct. Definitely check the browser console to see if there is error with finding the css file. I would check to make sure that the css file is indeed named "style.css".

answered Mar 29 '17 at 00:02

Alexandra G

61
1
3

score 0 · Answer 2 · answered Mar 29 '17 at 00:19

0

try doing class="background"

and then in css do .background instead of #background

answered Mar 29 '17 at 00:19

Patrick

57
1
6

score 0 · Answer 3 · edited May 23 '17 at 12:10

0

Try putting this code at the line under your title tag

<base href="/">

This thread might help you more

edited May 23 '17 at 12:10

Community

1
1

answered Mar 29 '17 at 00:44

JkAlombro

1,696
1
16
30

Linking CSS to HTML background color

3 Answers3