Jsf outputstylesheet html tag

by

JSF h:outputStylesheet tag is used to render HTML link element with type “text/css”.

JSF tag:

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

Rendered HTML tag:

<link type="text/css" rel="stylesheet" 
  href="/JavaServerFaces/faces/javax.faces.resource/style.css?ln=css" />

Note: When using h:outputStylesheet put entry in your page otherwise it will not work.

Example:

style.css

.hello{
   color:blue;
}

welcome.xhtml

<?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:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
	<h:head>
		<title>JSF output style sheet example.</title>
		<h:outputStylesheet library="css" name="style.css"/> 
	</h:head>
    <h:body> 
      <h3>JSF output style sheet example.</h3>
      <div class="hello">Hello World.</div>
    </h:body>
 
</html>

faces-config.xml

<?xml version="1.0" encoding="windows-1252"?>
<faces-config version="2.0" 
xmlns="http://java.sun.com/xml/ns/javaee" 
xmlns:xi="http://www.w3.org/2001/XInclude" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd">
 
</faces-config>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" 
    	xmlns="http://java.sun.com/xml/ns/javaee" 
    	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    	http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
 
    <servlet>
        <servlet-name>faces</servlet-name>
        <servlet-class>
          javax.faces.webapp.FacesServlet
        </servlet-class>
    </servlet>
 
	<servlet-mapping>
        <servlet-name>faces</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
 
</web-app>

URL:

http://localhost:7001/JSFExample14/faces/welcome.xhtml

Output:

JSF example14
Download this example.