Menu
I have a HTML page reference a stylesheet on my github.
It is:
<html>
<head>
<title>Basic JavaScript Quiz</title>
<link rel="stylesheet" type="text/css" href="https://raw.github.com/dublintech/JavaScript_Examples/master/jsquiz/css/jquiz.css" />
</head>
<body>
<h1 id="title">Please be styled</h1>
</body>
</html>
My expectation is that the Please be styled will be styled as per stylesheet. But it is not.
Any ideas?
Thanks.
980
Make sure the link tag is at the right place If you put the <link> tag inside another valid header tag like <title> or <script> tag, then the CSS won't work. The external style CAN be put inside the <body> tag, although it's recommended to put it in the <head> tag to load the style before the page content.
Install "eXtract Snippet"=> Inspect an element using chrome's developer tools 'inspect element'. Within the developer tools you should also see a panel named "eXtract HTML CSS". Click on to the "eXtract HTML CSS" panel and further click onto the "Get HTML/CSS of inspected element" button withing the panel.
CSS can be added to HTML documents in 3 ways: Inline - by using the style attribute inside HTML elements. Internal - by using a <style> element in the <head> section. External - by using a <link> element to link to an external CSS file.
Firefox logs an error in the console:
The stylesheet https://raw.github.com/dublintech/JavaScript_Examples/master/jsquiz/css/jquiz.css was not loaded because its MIME type, "text/plain", is not "text/css". @ http://jsbin.com/oyiceq/1/edit
Don't use the resource from github - it's not a CDN. Save the file and serve it up from your own server.
There is a discussion on this behavior. The relevant bit is the response from github:
"That's a feature, sorta. Please do not abuse the raw URLs like that, they are a very expensive operation for our servers. You should host files like that on pages.github.com instead."
156
The server is sending the file with the Content-Type of text/plain, which will likely prevent it from being used as CSS.
36
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
