Jsf/Facelets:CSS File Is Not Being Recognized Using <H:Outputstylesheet> Tag

JSF/Facelets : CSS file is not being recognized using h:outputStylesheet tag

The <h:outputStylesheet> (and <h:outputScript>) requires a <h:head>, but you've there a <head>. Fix it accordingly.

<h:head>
    <h:outputStylesheet name="css/styles.css" />
</h:head>

Further, you need to ensure that the css/styles.css file is been placed in the /resources subfolder of the public webcontent.

WebContent
 |-- resources
 |    `-- css
 |         `-- styles.css
 :

As to your attempt to use the library attribute, be careful with this, using library="css" isn't entirely correct in this context. See also: What is the JSF resource library for and how should it be used?

Can I make the h:outputStylesheet to load css file that is being retrieved from servlet? (not resources folder)

No, you can't. Even when it has worked, it's the servlet who's responsible for EL resolving, not the <h:outputStylesheet> component.

You need to solve the problem differently. I'd start by just putting all CSS dependencies, such as CSS images, in the very same folder as the CSS file itself and then reference them relatively. This way you don't need to fiddle with the context path.

By the way, the #{request.contextPath} is shorter.

Images not rendered when using h:outputStylesheet

You need to reference CSS image resources via #{resource} in EL so that it will print the proper JSF resource URL.

body {
    background: #fff url(#{resource['images/body_background.png']}) repeat -x;
}

#header {
    background: transparent url(#{resource['images/header_bg.png']}) no-repeat top right;
}

How to link external CSS resource with JSF h:outputStylesheet?

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/>.

Jsf/Facelets:CSS File Is Not Being Recognized Using <H:Outputstylesheet> Tag