Including external CSS

[primexx]

I was just wondering which method of including external CSS is most disirable, and why. I use the <link> tag, some people use the @import tag, and perhaps theres other ways?

I dont see the difference between them.

By the way this would be an XHTML 1.1 document.

[_Aerospace_Eng_]

The @import is used to hide CSS from older browsers like NS4 and since support for CSS in NS4 isn't too great your site could be disaster in that browser. Same goes for Mac IE which does support @import but you can use the commented back slash hack to hide certain CSS from Mac IE.

[Tails]

XHTML 1.1 must only be served as application/xhtml+xml (unlike the 1.0 flavors, which can be served as text/html, with the exception of XHTML 1.0 Basic). So the proper way would be to use:

<?xml-stylesheet type="text/css" href="file.css"?>


Whether that appears above or below the DTD doesn't matter as far as validation goes, but XML processing instructions would probably be best kept at the top of the page all together since they must occur before the first tag of the page and can't contain non-XML defined entities anyway. I'm not sure if 1.1 allows or restricts the <link /> tag or not, but supporting browsers still honor it. And <?xml-stylesheet?> doesn't seem to work together with an XSL transformed XML file either, so <link /> and the rest would have to do there.