JSF OutputStylesheet Example


The JSF OutputStyleSheet renders an HTML <link> tag of type “text/css”. Below is the

h:OutputStylesheet and its corresponding HTML tags.


JSF => <h:outputStylesheet name=”style/template.css” />

HTML => <link type=”text/css” rel=”stylesheet” href=”/JSF_OutputStylesheet_Example/faces/javax.faces.resource/style/template.css” />


JSF h:OutputStylesheet Example


Create a folder ‘resources’ under WebContent directory and place the CSS files over there as shown below. Below are the style.css and the index.xhtml file


Highlight-1). The style/template.css file is residing under the resources directory

Highlight-2). The JSF <H:ouputStylesheet> pointing to the stylesheet

Highlight-3) The button component has the styleClass attribute which is a CSS class present in the template.css



112317_1954_JSFOutputSt1 JSF OutputStylesheet Example


Below is the content of the template.css file. The CSS class sets background color Yellow.


112317_1954_JSFOutputSt2 JSF OutputStylesheet Example


Below is how the page looks like in the browser


112317_1954_JSFOutputSt3 JSF OutputStylesheet Example


Download the JSF Project:


govindan JSF OutputStylesheet Example
Connect me


Thank you for visiting my personal blog. Myself Govindan, Software Developer by profession since 2006 and hence I started this blog early in 2016 and ever since I've been writing about technologies experienced and learnings of everyday life.

The views expressed on this blog are my personal views and do not necessarily reflect the views of my employer.

Please feeling free to reach me on any comments and feedbacks you have. Would be more than glad to listen and reply 🙂
govindan JSF OutputStylesheet Example
Connect me
By | 2017-11-23T15:09:39+00:00 November 23rd, 2017|Categories: JSF|Tags: , , , |0 Comments
Like us on Facebook.