How to make my css import to html correct?

Question

I am sorry, I am quite new in IT and I tried almost everything, I am frustrated that I am impossible to import correctly my .css file to my .html file. I looked on many other stackoverflow questions, for example: (1), (2), (3) and found no help. If I import my .css to html with <style></style> - it works, but with include file as "link href stylesheet" - it does not. I use Chrome browser Version 69.0.3497.100 (Official Build) (64-bit).

I tried to make html page with my openstreet map and that map has its own stylesheet included too. It not works because I can't include multiple css files to one html? I have .html file and .css file in the same folder. Why this: <link href='/styles.css' rel='stylesheet' /> is not working please?

My code(client.html):

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>The mapbox tutorial</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet' />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

    <link href='/styles.css' rel='stylesheet' />

</head>

<body>

    <div>
        <h1>MY new page</h1>
        <div id="data">
                Write me something: <input type="text" id="inputData">&nbsp;
                <button id="myButRun">Send</button>
        </div>
    </div>

    <div style="margin-left:10px; height: 500px; margin-top: 20px; width: 400px; " id='map'></div>

<script>
    mapboxgl.accessToken = 'myPrivateKey';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v10',
        center: [42.10, 57.14],
        zoom: 11
    });

    map.on('load', function () {
            map.addLayer({
                "id": "data-update",
                "type": "line",
                "source": {
                    "type": "geojson",
                    "data": "empty"
                },
                "layout": {
                    "line-join": "round",
                    "line-cap": "round"
                },
                "paint": {
                    "line-color": "#faff00",
                    "line-width": 8
                }
            });
    });
</script>

</body>
</html>

My code(styles.css):

body { margin:0; padding:0; }
#map{
    border-style: solid;
    border-width: 5px;
}

Hmm this not, I saw it always beginning with / ... ok will try it, thanks for another option — , Oct 14 '18 at 20:23
Two possible reasons: Either your stylesheet is not at your document root (you have it referenced with `/` - this is the document root), or your styles have cached. If your stylesheet is not in your document root, you'll need to use a relative reference (like `href="styles.css"` or `href="../styles.css"`). If you've cached, try `CTRL + SHIFT + R`. It would help to mention where your index file sits in your folder structure and where your stylesheet sits as well :) — Obsidian Age, Oct 14 '18 at 20:24
*"I saw it always beginning with /*". Using `/styles.css` means that **style.css** is at the root of your project. — Quentin Veron, Oct 14 '18 at 20:24
oh ... I feel stupid... it works,...It should be as you posted here... thank you @Thasmo ... what now with my question ? You will write answer or how it goes here? — , Oct 14 '18 at 20:26
my file was in root of my project, but thanks to all for explanation... now I see the difference .. or I not understand what you mean by document root — , Oct 14 '18 at 20:27
If you're not using a webserver, then there's no web-root and the file can't be accessed using `/styles.css`. — thasmo, Oct 14 '18 at 20:29
Ou ... no such complicated things I do not do at my very start, I have no webserver, just windows home machine and my personal project ... I understand now all, you saved me, thank you, if you want, post answer ... with that explanation about /webserver-root path too... — , Oct 14 '18 at 20:33

score 2 · Accepted Answer · answered Oct 14 '18 at 20:38

The / when using /styles.css indicates that the file is located in the web-root of the website. The web-root is the actual main directory served by the web-server for a configured website. When there's no web-server running, there's no actual web-root, from which the file can be read and deliverd to the browser.

In this case, where no web-server exists, the file was accessed directly from the local file system and using <link href='styles.css' rel='stylesheet'> will correctly reference the CSS file, which is located in the same directory as the HTML file.

How to make my css import to html correct?

My code(client.html):

My code(styles.css):

1 Answers1