Using external .css for html styling

Question

I have an issue that I cannot link my external style.css to my index.html file. Both files are in exact same directory.

My style.css :

<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;    
}
</style>

And I am trying to link it in my html as following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>test</title>
    <link href="style.css" type="text/css" rel="stylesheet"/>
</head>

Full html script:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>test</title>
    <link href="style.css" type="text/css" rel="stylesheet"/>
</head>




<br>

<table id="t1">
<caption>Operation table</caption>
    <thead>
        <tr>
            <th>Operation code</th>
            <th>To Do</th>
            <th>Done</th>
            <th>Left</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>abc</td>
            <td>1000</td>
            <td>50</td>
            <td>
            </td>
        </tr>
        <tr>
            <td>def</td>
            <td>555</td>
            <td>50</td>
            <td id ="number1">  
            </td>
        </tr>
    </tbody>
</table>
<p id="demo"></p>
</html>

All the examples that I have looked up online use exact same method.

I have connected to the webserver and turned on developer mode to see if I can see anything. I have managed to spot an error:

Refused to apply style from '192.168.10.173:8080/style.css' because its MIME type ('text/html') is not supported stylesheet MIME type, and strict MIME checking is enabled

Still looking into why it could be caused

Remove the style tags from CSS file. Try using the relative path like './style.css' . Check for file names. Let us know if nothing works out. — shivamragnar, Jun 03 '21 at 12:05

rubenpoppe · Answer 1 · 2021-06-03T11:59:49.340

2

CSS files shouldn't have style tags. Simply remove them and it'll work.

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;    
}

When you want to declare styles inside of an HTML file, then you have to put the CSS between style tags.

edited Jun 03 '21 at 11:59

answered Jun 03 '21 at 11:58

rubenpoppe

307
2
10

Oh thanks for pointing it out! However, still not working. That is very weird. – Lukas Petrikas Jun 03 '21 at 11:59
@LukasPetrikas have you made sure you are not getting fooled by your browser cache now? Delete cache, or use [ctrl]+[f5] (Windows, not sure what the Mac/Safari equivalent is right now), and check again. – CBroe Jun 03 '21 at 12:01
If I copy the code in the CSS and put it withing style tags directly into my html, it changes the style of my table. For some reason the index.html is not finding the external CSS – Lukas Petrikas Jun 03 '21 at 12:01
I have opened a developer mode and noticed what is the problem: ```Refused to apply style from '192.168.10.173:8080/style.css' because its MIME type ('text/html') is not supported stylesheet MIME type, and strict MIME checking is enabled``` – Lukas Petrikas Jun 03 '21 at 12:03
1

@LukasPetrikas your server either served an error document instead of the stylesheet (check if you can access `192.168.10.173:8080/style.css` directly, via your browser address bar), or your server is not configured to send the appropriate Content-Type header for files ending with the `.css` suffix. – CBroe Jun 03 '21 at 12:20
@CBroe trying to access it directly returns an error: ```Cannot GET /style.css```. I am using node server using sockets but at the moment I am working more on html side of the website. I simply do not like that I have to keep my style in my .html as it looks confusing. Still havent found solution to it but still looking. – Lukas Petrikas Jun 04 '21 at 05:36

Using external .css for html styling

1 Answers1