131 total views, 4 views today

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

Govind

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.
Connect!