Menu
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?
<!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">
<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>
body { margin:0; padding:0; }
#map{
border-style: solid;
border-width: 5px;
}
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.
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
