Member Avatar for tivrfoa

Inline CSS works, but when I link it doesn't.

It happned in Firefox 3.something and in IE8.

template1.html

<html>
<head>
<title>title here</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="..." />
<meta name="description" content="..." />
<link ref="stylesheet" href="body.css" type="text/css" />
<style type="text/css">
/* Here it works
body {
	background-color: blue;
}
*/
</style>
</head>
<body>
<div id="container">
</div>
</body>
</html>

body.css

body {
	background-color: blue;
}
  • 3 Contributors
  • 7 Replies
  • 1K Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by tivrfoa

Dani AI

Generated

A tiny typographical error was the root cause: the link element used the wrong attribute name, so the browser never treated the external file as a stylesheet. spotted that mistake, which explains why the inline CSS in the page still worked while the external file appeared to do nothing.

A short checklist of other things that commonly follow a similar symptom and are worth verifying: confirm the file path and exact filename (hosts running Unix-like systems are case-sensitive), ensure the stylesheet is uploaded and publicly readable (HTTP 200, not 404/403), and confirm the server sends a correct Content-Type (text/css). Clear browser cache or perform a hard refresh (Ctrl+F5 on Windows/Linux, Cmd+Shift+R on macOS) in case an old cached response is hiding changes. A valid standards doctype avoids quirks-mode rendering differences, and using simple, descriptive filenames reduces accidental name collisions (as suggested).

A concise verification workflow: fix the misspelled attribute; save and hard-refresh; open developer tools and check the Network tab to see the stylesheet request and response headers; look in the Styles/Computed pane to confirm rules from the external file are applied; check the Console for parse errors or MIME warnings. These steps will catch the usual follow-ons (path mistakes, permission or MIME issues, caching, or CSS syntax errors) after a typo like the one in this thread.

Recommended Answers

All 7 Replies

Member Avatar for teedoff

Well then I would guess it's a file path issue. Is your stylesheet(body.css) in the same folder as your index page? Or is it in another folder, and you didnt point to it in your link. Also, not sure it matters, but just for the sake of clarity, I dont normally name my files with names that correspond to tags or page elements like "body". Again, I doubt it hurts anything, but just my preference.

Can you post a live link to your site?

Edited by teedoff because: n/a
Member Avatar for tivrfoa

Well then I would guess it's a file path issue. Is your stylesheet(body.css) in the same folder as your index page? Or is it in another folder, and you didnt point to it in your link.

It's in the same folder. I can even click in the CSS link when I show the source code in Firefox 3.6.10.

Member Avatar for teedoff

Well again, we cant guess at it if you dont provide your full code or a LIVE LINK to your site.

Member Avatar for drjohn

Did you actually upload it to your site? It is not embedded in the page and has to be uploaded separately.

Can you give us a live url to look at?

Also you don't have a doctype in your code, and that is a very risky way to build your pages.

PS I agree that it is a bad idea to use a reserved word like body for anything purpose other than its intended reserved purpose. It's just good working practice in all computing to treat reserved words with respect.

Member Avatar for tivrfoa

Well again, we cant guess at it if you dont provide your full code or a LIVE LINK to your site.

The full code was provided, and I don't have a site.
I just want that someone else copy this code and try to run it in his machine to see if it works.

Member Avatar for teedoff

ok I see a spelling error in your stylesheet link!

<link ref="stylesheet" href="body.css" type="text/css" />

Should be:

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

You should also add a valid doctype if you expect cross browser compliance.

Edited by teedoff because: n/a
Member Avatar for tivrfoa

ok I see a spelling error in your stylesheet link!

thank you! You see. I just needed that someone tested the code. xD I think the rel property wasn't necessary in the past, but if I remove it, it doesn't work.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.