Inline CSS Styles Work, but External CSS Styles Don't

Question

I need help. This is ridiculous.

I'm using Komodo IDE, version 7.1.2, and Firefox version 15.0.1.

I created an HTML5 file like so:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta charset="utf-8" />

<title>Web Page</title>

<link rel="stylesheet" type="css/text" href="css/global.css" />

</head>

<body>

<div id="release">Release Date</div>

</body>

</html>

And the global stylesheet contains this and is located in a directory at the same level as the HTML file called css:

#release {
    text-align: center;
    font: small-caps;
    border-top: solid 1px;
    border-bottom: solid 1px;
    border-right: solid 10px;
}

Here is a picture of the directory structure:

enter image description here

I put the same styling into he HTML file and it works, but the styling isn't working with the external stylesheet. I am not new to website development, so this is particularly puzzling to me.

I tried this same thing on two Windows 7 machines and one Ubuntu 11.10 machine as well, with the same anomaly.

Here is the fiddle working:

http://jsfiddle.net/NKq8N/1/

What could be causing this?

Polyov · Accepted Answer · 2012-10-06 00:20:44Z

3

In the <link> attribute, the type should be "text/css", not "css/text".

answered Oct 6, 2012 at 0:20

Polyov

2,3293 gold badges26 silver badges36 bronze badges

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

3 Comments

nicorellius Over a year ago

Dude! Thanks. Sometimes it's just the stupid little things. I think I was hornswaggled because my IDE auto-filled it for me. I should look into that.

nicorellius Over a year ago

So the next question is why does jsfiddle.net accept this but not browsers? Just curious. I mean, other than it being incorrect ;--)

Polyov Over a year ago

Because to jsFiddle, the stuff you put in the "CSS" tab is read as if it were inline. You don't need to define a <link> in the jsFiddle because the CSS tab is automatically connected to the page. Same thing with the JavaScript tab, all the code in that part is read as an inline <script> tag. You can even inspect the HTML in that frame, it will show your code in an inline <style> tag.

Collectives™ on Stack Overflow

Inline CSS Styles Work, but External CSS Styles Don't

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related