How to include cascading style sheets (CSS) in JSF

In JSF 2.0, you can use <h:outputStylesheet /> output a css file.

For example,

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

It will generate following HTML output…

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

JSF outputStylesheet example

An example to show the use of JSF 2 <h:outputStylesheet /> to render a “style.css” file, locate in the “resources/css” folder, see figure below :

jsf2-outputStylesheet-example

JSF file

<?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"
      >
    <h:head></h:head>
    <h:body>
 
    	<h1>JSF 2 outputStylesheet example</h1>
 
    	<h:outputStylesheet library="css" name="style.css"  />
 
    	<div class="red">This is red color</div>
 
    </h:body>
 
</html>

It will generate following HTML output

<?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">
	<head>
		<link type="text/css" rel="stylesheet" 
		  href="/JavaServerFaces/faces/javax.faces.resource/style.css?ln=css" />
	</head>
 
	<body>
 
    	   <h1>JSF 2 outputStylesheet example</h1>
 
    	   <div class="red">This is red color</div>
 
	</body>
 
</html>
Warning
When render CSS file via <h:outputStylesheet /> tag, remember put the <h:head /> tag as well; Otherwise the css file will not be included.

Download Source Code

Download It – JSF-2-outputStylesheet-Example.zip (9KB)

References

  1. JSF <h:outputStylesheet /> JavaDoc
  2. JSF 2 resource library
Tags :

About the Author

mkyong
Founder of Mkyong.com and HostingCompass.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

  • Pingback: skycall limited()

  • Pingback: forexwinner ru()

  • Pingback: voip calling worldwide()

  • Pingback: water ionizer plans()

  • Pingback: free call()

  • Pingback: catering a domicilio()

  • Pingback: alkaline water brands()

  • Pingback: News Archive()

  • Pingback: friv()

  • Pingback: ca auto transport()

  • Pingback: water ionizer()

  • Pingback: bedste laan lige nu()

  • Pingback: SEO()

  • Pingback: water ionizer machines()

  • Pingback: gurpreet singh malcha marg()

  • Pingback: website design company bangladesh()

  • Pingback: high quality backlinks()

  • Pingback: atal pension yojana scheme()

  • Pingback: work from home jobs()

  • Pingback: parking()

  • Pingback: youporn()

  • Pingback: tvpackages.net()

  • Pingback: tvpackages.net()

  • Pingback: Google()

  • Pingback: Blue Coaster33()

  • magjogui

    I have the problem that my CSS is not working on my JSF, even is not rendered in the HTML generated, can you please give me a tip, what could be?

    thanks

  • Marcos

    What to do in case you have to reference an image inside CSS ?

  • MM

    Hello,
    I followed all your instructions, I wrote the code in my computer but it did not work, then I sent to all the code to my friend’s computer, It did work in my friend’s computer! Do you have any suggestions?
    Your tutorials are really helpful by the way!
    Cheers.

  • http://www.hummaa.com/user/end2throat www.hummaa.com

    It is in reality a nice and helpful piece of info. I’m happy that you just shared this useful information with us. Please stay us up to date like this. Thanks for sharing.

  • Foo.hazard

    is there a way to reference external CSS files using JSF ?

    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.8.0/build/cssreset/cssreset-min.css">
    

    Because using this doesn’t work:

    <h:outputStylesheet name="http://yui.yahooapis.com/3.8.0/build/cssreset/cssreset-min.css">
    
  • fumandito

    Hello Mr.Yong.
    When I import a resource via

    &lt;h:outputStylesheet&gt;

    or

    &lt;h:outputScript&gt;

    , is necessary match the URL mapping faces/* ???
    So, If I use this URL:
    http://localhost:8080/WebApp/faces/login.xhtml -> It’s work correctly
    If I use this URL:
    http://localhost:8080/WebApp/login.faces -> Don’t load the CSS or Javascript resources

    Actually in my web.xml:

    &lt;servlet-mapping&gt;
        &lt;servlet-name&gt;Faces Servlet&lt;/servlet-name&gt;
        &lt;url-pattern&gt;/faces/*&lt;/url-pattern&gt;
      &lt;/servlet-mapping&gt;
      &lt;servlet-mapping&gt;
        &lt;servlet-name&gt;Faces Servlet&lt;/servlet-name&gt;
        &lt;url-pattern&gt;*.faces&lt;/url-pattern&gt;
      &lt;/servlet-mapping&gt;
      &lt;servlet-mapping&gt;
        &lt;servlet-name&gt;Faces Servlet&lt;/servlet-name&gt;
        &lt;url-pattern&gt;*.jsf&lt;/url-pattern&gt;
      &lt;/servlet-mapping&gt;
      &lt;servlet-mapping&gt;
        &lt;servlet-name&gt;Faces Servlet&lt;/servlet-name&gt;
        &lt;url-pattern&gt;*.xhtml&lt;/url-pattern&gt;
      &lt;/servlet-mapping&gt;

    Any idea?
    Thanks in advance.

    Fernando.

    • http://www.mkyong.com mkyong

      I believe this – http://localhost:8080/WebApp/login.faces , don’t load your application also, don’t you? All faces page need to be in “/faces/* ” directory. (web.xml)

      • fumandito

        Ok, matching any URL only on *.faces works correctly, the problem was in css file when I import the images:
        background: transparent url(“images/bg_button_a.gif”) no-repeat scroll top right;
        /faces/* is needed.

        But now I wrote:

        background: transparent url(&quot;#{facesContext.externalContext.requestContextPath}/resources/images/bg_button_a.gif&quot;) no-repeat scroll top right;

        This work perfect :)

        Thanks, problem solved ;)

        • http://www.mkyong.com mkyong

          Thanks for extra input, to use JSF context to load a resources.

  • AK

    Hello,
    If I have to import a css file in another with jsf how can I do?
    e.g. @import style.css (Style.css is located in resources/css/base)
    I tried @import ${facesContext.externalContext.requestContextPath}/css/base/style.css but it does not work..
    Can you help me please?
    Thanks a lot!

    • fumandito

      background: transparent url(“#{facesContext.externalContext.requestContextPath}/resources/images/bg_button_a.gif”)

  • Lumia

    Hello sir,

    I successfully run above example. But the problem is after run one time if i apply changes in css file then that will not display effect in my xhtml pages. Though i removed the < tag from my page though its display effect on my page. So,what should be the solution.

  • Pingback: how to insert a css file into jsf2.0 project | solare media blog()

  • leolux

    Why do you define the output within the tag an not inside the head part?

    • http://www.mkyong.com mkyong

      JSF will render css output in “head” tag automatically.

  • Pingback: JSF 2.0 Tutorial()