Geek Answers Handbook

Unable to pull CSS file from webpage to my html page

I have a link to an HTML page in a stylesheet on my github.

It:

<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 Please be styled will Please be styled . But this is not so.

Any ideas?

Thanks.

+7
source share
5 answers

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

Do not use a resource from github - it is not a CDN. Save the file and open it on your own server.

There is a discussion in this behavior. The corresponding bit is the answer from github:

“This is a feature, sorting. Please do not abuse raw URLs, it is a very expensive operation for our servers. Instead, you should upload files to .github.com.

+8
source

The server sends a file with Content-Type from text/plain , which, most likely, will not allow using it as CSS.

+3
source

Remove the attribute id from your h1 tag to work. There is no #title selector in your CSS file.

-one
source

Use relative paths, the link you used leads to a page showing CSS, but doesn't actually serve data like CSS.

-one
source

I checked the css file and you have no title id. You set the style in the h1 element. Therefore, to see the style, you can change it as follows:

 <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>Please be styled</h1> </body> </html>

or change css as follows:

 #resultsTable { width:100%; border-collapse:collapse; } #resultsTable td, #resultsTable th { font-size:1em; border:1px solid #0066CC; padding:3px 7px 2px 7px; } #resultsTable th { font-size:1.1em; text-align:left; padding-top:5px; padding-bottom:4px; background-color:#A7C942; color:#ffffff; } #resultsTable tr.alt td { background-color:#e7f4c3; } body{ margin: 0px; padding: 0px; background: #669966; cursor: default; font-size: 12px; font-family: Arial, Tahoma; } .questionContainer { width: 800px; border: 3px double #003366; padding: 3px; margin: 10px; } ul { margin: 0px; padding: 5px; } ul li { list-style: none; } a { border: 1px solid #000; padding: 2px 5px; font-weight: bold; font-size: 10px; background: #FFF; cursor: pointer; } a:hover { background: none; } .btnContainer { width: 96%; margin: 10px 0px 10px 2%; } #progressKeeper { width: 800px; height: 25px; border: 3px double #003366; margin: 0px 10px; padding: 3px; } #txtStatusBar { margin: 5px 10px; font-weight: bold; } #progress { background: green; width: 0; height: 25px; } .radius { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -o-border-radius: 6px; } #resultKeeper { width: 800px; margin: 10px; padding: 3px; border: 3px double #003366; background:#66CC66; } #resultKeeper div { line-height: 20px; } .totalScore { font-weight: bold; padding:10px; } input { position: relative; top: 2px; } #title { border-bottom: 1px solid #003366; font-size: 16px; height: 22px; margin: 10px; text-indent: 5px; } .prev { float: left; } /** elements after a float will flow around it **/ .next, .btnShowResult { float: right; } .clear { clear: both; } /** no floats allowed left or right **/ .hide { display: none; } .resultlist li.altli{background:#CCFFAA;} .resultlist li {background: #BBEEAA;} #resultsTable td.fail{color:red;}
-2
source

More articles:


All Articles