0

I was having issues using <link rel="stylesheet" href="styles.css"> on my webpage. It's in the head tag. Once I removed the HTML5 doctype declaration, it worked fine, no other changes... Any ideas as to why HTML5 would be preventing the browser from using the external stylesheet?

iddings
  • 31
  • 4
  • 5
    there's nothing in html5 anywhere that says "no external stylesheets". if they're not loading, then it's something to do with your code. not allowing external stylesheets defeats the entire purpose of HAVING css in the first place. – Marc B Feb 19 '14 at 17:47
  • 4
    Where's your code? HTML5 **does** allow external stylesheets. – Michael Irigoyen Feb 19 '14 at 17:48
  • 1
    Are you sure it is not some other HTML error that causes it not to load. Did you validate your HTML/CSS to see if there are errors? – epascarello Feb 19 '14 at 17:49
  • 1
    If you can show more of your HTML or CSS pages, that would help us determine what kind of solution to look for. – Mr. Meeseeks Feb 19 '14 at 18:04

3 Answers3

1

First, make sure you actually have a styles.css file in the same directory as your HTML5 document. Second, try this code, instead: <link href="styles.css" rel="stylesheet" type="text/css">.

TylerH
  • 20,799
  • 66
  • 75
  • 101
  • The answers on *[Is type=“text/css” necessary in a tag?](http://stackoverflow.com/questions/5409114/is-type-text-css-necessary-in-a-link-tag)* and *[Do we need type=“text/css” for in HTML5](http://stackoverflow.com/questions/7715953/do-we-need-type-text-css-for-link-in-html5)* say that `type="text/css"` is completely optional. Do you have a theory why it might be required in this case? – Philipp Feb 19 '14 at 17:52
  • @Philipp It is not required by HTML5, but in case OP's code falls back to HTML4.01 (which does require it) or in case OP wants to use type "ico" instead of "css" later on in the document, it is helpful for consistency's sake. – TylerH Feb 19 '14 at 17:56
  • @Philipp Additionally, more types might be added to the specification in the future, in which case it's a good idea to have the type you want already defined. – TylerH Feb 19 '14 at 18:02
  • The OP says it loads with doc type is removed so the file is there. Type is optional. -1 – epascarello Feb 19 '14 at 18:14
1

The odds are that this has nothing to do with the style sheet being external as opposite to being embedded in HTML via the style element. Rather, some parts of the style sheet itself “work” in quirks mode only, and <!doctype html> prevents quirks mode.

For example, a declaration like width: 600 ignored by conforming browsers, by CSS rules. In quirks mode, browsers intentionally break the rules and interpret 600 as 600px, which is usually what the author meant.

The conclusions depend mainly on the status of the page. If it is an old page, it may have many kinds of quirks that require quirks mode; then just don’t add <!doctype html>. If it is a new page, or a page being completely rewritten, get rid of quirks: make sure your HTML, CSS, and JavaScript code conform to specifications.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • That's the thing though, it is a brand new page (HTML5), the CSS validates as CSS3 with no errors. WITH the doctype declaration, embedding the css within ``) and that works fine. But when I use `` no styles are rendered. WITHOUT the doctype, it works both ways. I also made sure all urls referenced are absolute to avoid any possible confusion. – iddings Feb 19 '14 at 20:19
  • Then you need to provide a testable case that actually demonstrates the problem (as you should have done initially). – Jukka K. Korpela Feb 19 '14 at 20:27
0

This markup is fine:

<link rel="stylesheet" href="styles.css">

The type=text/css is not required, it's used by user agents only.

The problem must be in your browser - clear cookies/cache /test with a different browser.

(you may check out this demo: <link> tag, 2 examples + interpretation - removing step by step each attribute to highlight the impact in Browser if any)

Shadow The GPT Wizard
  • 66,030
  • 26
  • 140
  • 208
Daniel
  • 379
  • 2
  • 6