Hi,

I have created few xhtml for my liferay portlets... they are working well but i am unable to apply CSS to my xhtml...

please consider my sample code..
<h:outputStylesheet name="override.css" />
<h:outputLabel styleClass="dataBold" value="JESUS"></h:outputLabel>

the override.css file is in CSS folder that is under docroot in my liferay portlet project.
I also tried by including library in outputStylesheet tag as below :
<h:outputStylesheet library="css" name="override.css" />
<h:outputLabel styleClass="dataBold" value="JESUS"></h:outputLabel>

PLease help me asap i want to get my css work in the xhtml
Thanks in Advance

Swetha

hey please someone help me... am really running out ideas....

You should not be trying to inject CSS and/or JS in your xhtml pages.

Instead you should use the liferay-portlet.xml to include these resources.

There are two ways of loading CSS resources in a JSF2 view/composition:

1. Using the HTML link element tag like this:
<link href="#{request.contextPath}/css/foo.css" rel="stylesheet" type="text/css"></link>

2. Using the JSF2 h:outputStylesheet component tag like this:
<h:outputStylesheet library="css" name="css" />

The benefit of using #1:
- The browser directly requests a resource from the server and does not invoke the JSF lifecycle.

The benefits of using #2:
- The CSS resource can use the #{resource['']} EL-expression inside it for images.
- The href URL generated by the h:outputStylesheet renderer is compatible with WSRP.

So #1 is always faster, but #2 is more flexible. This demo uses #2 simply for testing purposes.