Cannot pull a CSS file from web into my html page

Question

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.

Open up your dev tools, go to the Network tab and check that your stylesheet is loaded. — wakooka, Dec 27 '12 at 22:00

score 8 · Accepted Answer · answered Dec 27 '12 at 22:02

8

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."

answered Dec 27 '12 at 22:02

Dennis

32,200
11
64
79

Works in Chrome though. Weird looks like it doesn't care – Yuriy Galanter Dec 27 '12 at 22:09
@Trekstuff I think the Chrome code allows you to use files of the `text/plain` format, since it probably assumes it's a `.css` file because of the extension. Chrome has a lot of those features. [This topic](http://stackoverflow.com/questions/3467404/chrome-says-resource-interpreted-as-script-but-transferred-with-mime-type-text) is about JavaScript, but it confirms my suspicions about how it interprets files (I am not 100% sure though, it's a guess). – Jelmer Dec 27 '12 at 22:14
1

Doesn't work in my version of Chrome. Many browsers will use it just fine. Also, the fact that it works from time to time is **not** a feature... it's a quirk. It probably has more to do with the fact that the resource is being used in a ` – Brad Dec 27 '12 at 22:23
@Dennis Thanks. I am getting closer. I set up a git hub pages version of project and synced everything over. However the URL: https://raw.github.com/dublintech/JavaScript_Examples/gh-pages/jsquiz/css/jquiz.css gives me the same error. Mime type is still coming back as "text/plain", not "text/css". Any ideas? – dublintech Dec 27 '12 at 23:02
1

You should *not* be using the raw.github.com URL. That server delivers everything as `text/plain`. Use your GitHub page URL. – Dennis Dec 27 '12 at 23:14
@Dennis but the project URL https://github.com/dublintech/JavaScript_Examples/blob/gh-pages/jsquiz/css/jquiz.css returns a git hub page and won't work. – dublintech Dec 27 '12 at 23:23
@Dennis Brilliant. My problem was I was using https. It will only work with http. – dublintech Dec 27 '12 at 23:39

score 3 · Answer 2 · answered Dec 27 '12 at 22:03

3

The server is sending the file with the Content-Type of text/plain, which will likely prevent it from being used as CSS.

answered Dec 27 '12 at 22:03

Brad

159,648
54
349
530

score -1 · Answer 3 · answered Dec 27 '12 at 21:58

-1

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

answered Dec 27 '12 at 21:58

SaidbakR

13,303
20
101
195

The `id` attribute does not prevent styling via non-id selectors unless there is a specificity conflict (and there isn't in this case). – cimmanon Dec 27 '12 at 22:12

score -1 · Answer 4 · answered Dec 27 '12 at 22:00

-1

Use relalative paths, the link you used leads to a page showing the CSS, but not actually serving the data as CSS.

answered Dec 27 '12 at 22:00

aNewStart847

1,086
7
15

1

This is not true. The link works fine, and returns raw CSS. The only thing wrong with it is the `content-type` header. – Brad Dec 27 '12 at 22:02
And the header is not set to CSS as the file is not used for serving CSS, but to view the CSS. You cannot change the header yourself in github in this situation. – aNewStart847 Dec 28 '12 at 14:55

score -2 · Answer 5 · answered Dec 27 '12 at 22:01

I checked the css file and you don't have any title id. You have set the style on the h1 element. So in order to see the style, you can choose to modify the HTML like this:

<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 modify the css like this:

#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;}

so you mean that the style is given by h1 and the title id that isn't defined in the css is ignored. Right? @Brad — Fabio, Dec 27 '12 at 22:13
IDs are used for more than CSS. The `id` attribute isn't ignored... it just has no style defined for it. The tag will take the style defined by the `h1` element selector. — Brad, Dec 27 '12 at 22:21

Cannot pull a CSS file from web into my html page

5 Answers5