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
– shivamragnar, Commented Jun 3, 2021 at 12:05

rubenpoppe · Accepted Answer · 2021-06-03 11:59:49Z

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 3, 2021 at 11:59

answered Jun 3, 2021 at 11:58

rubenpoppe

3162 silver badges10 bronze badges

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

6 Comments

Lukas Petrikas Over a year ago

Oh thanks for pointing it out! However, still not working. That is very weird.

C3roe Over a year ago

@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.

Lukas Petrikas Over a year ago

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 Over a year ago

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

C3roe Over a year ago

@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.

|

Collectives™ on Stack Overflow

Using external .css for html styling

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related