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 — user10503110
– user10503110, Commented Oct 14, 2018 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
– Obsidian Age, Commented Oct 14, 2018 at 20:24
"I saw it always beginning with /". Using /styles.css means that style.css is at the root of your project. — Quentin
– Quentin, Commented Oct 14, 2018 at 20:24
If you're not using a webserver, then there's no web-root and the file can't be accessed using /styles.css. — thasmo
– thasmo, Commented Oct 14, 2018 at 20:29

thasmo · Accepted Answer · 2018-10-14 20:38:53Z

3

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.

answered Oct 14, 2018 at 20:38

thasmo

10k6 gold badges29 silver badges33 bronze badges

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

Collectives™ on Stack Overflow

How to make my css import to html correct?

My code(client.html):

My code(styles.css):

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

My code(client.html):

My code(styles.css):

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related