JSF 2.0 introduced standard resource locations. Resources are artifacts a page or JSF component needs to render properly. Resource examples include CSS stylesheets, JavaScript files, and images.

In JSF 2.0 and newer versions, resources can be placed in a subdirectory under a folder called resources, either at the root of the WAR file or under its META-INF directory. By convention, JSF components know they can retrieve resources from one of these two locations.

In order to avoid cluttering the resources directory, resources are typically placed in a subdirectory. This subdirectory is referred to from the library attribute of JSF components.

For example, we could place a CSS stylesheet called styles.css under /resources/css/styles.css.

In our JSF pages, we could retrieve this CSS file using the <h:outputStylesheet> tag, as follows:

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

The value of the library attribute must match the subdirectory where our stylesheet is located.

Similarly, we could have a JavaScript file under /resources/scripts/somescript.js and an image under /resources/images/logo.png, and we could access these resources as follows:

<h:graphicImage library="images" name="logo.png"/>

And:

<h:outputScript library="scripts" name="somescript.js"/> 

Notice that, in each case, the value of the library attribute matches the corresponding subdirectory name under the resources directory, and the value of the name attribute matches the resource's file name.