How to link external CSS resource with JSF h:outputStylesheet?
I was wondering if I can use <h:outputStylesheet/> to link CSS from an external resources. I want to link the Yahoo Grids. Using the following code, I got a RES_NOT_FOUND:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:tcmt="http://java.sun.com/jsf/composite/tcmt/component">
<h:head>
</h:head>
<h:body>
<h:outputStylesheet library="css" name="http://yui.yahooapis.com/3.3.0/build/cssgrids/grids-min.css" target="head" />
</h:body>
</html>
Answer
You can keep using plain HTML for that:
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.3.0/build/cssgrids/grids-min.css" />
When you use the <h:graphicImage/> or <h:outputStylesheet/> or <h:outputScript/>, then the file needs to be inside the /resources folder of the web application itself. See also How to reference CSS / JS / image resource in Facelets template? But if the file is not provided by the web application, then you should use plain HTML <img/> or <link/> or <script></script> for this.
Instead of plain HTML <link/> you can also download this .css and put in the /resources folder of the web application so that you can use <h:outputStylesheet/>.