CSS not applying in JSF application

Question

I am new to JSF. I am trying to put my inline styles to a CSS file but it is not working. Please find the code below.

My XHTML file is in following location:
\WebContent\template\

CSS is in following location:
\WebContent\resources\css\

XHTML code:

<ui:composition template="/template/BasicTemplate.xhtml">
<h:outputStylesheet library="css" name="style.css" />
    <ui:define name="content">
        <h:form>
       dfdskdksdk <h:outputText value="#{msg['message.test1']}" />
<table width="80%">
    <tr>
    <h:outputStylesheet library="css" name="css/style.css" />
        <td width="15%" background="red" >
            <b>Location Coverage*</b>
        </td>

I have tried using the following combinations

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

Tried using this line inside and outside <ui:composition> tag.

Thanks

have you tried using simple link with `#{request.contextPath}` like so `` ? — Kuba, Dec 02 '13 at 18:30

score 3 · Answer 1 · edited May 23 '17 at 12:22

Your mistake is the placement of the <h:outputStylesheet>:

<ui:composition template="/template/BasicTemplate.xhtml">
    <h:outputStylesheet library="css" name="style.css" />
    <ui:define name="content">
        ...
    </ui:define>
</ui:composition>

When creating a template client, it's important to understand that anything outside <ui:define> is ignored (like as anything outside <ui:composition>).

Move the <h:outputStylesheet> declaration to inside <ui:define>:

<ui:composition template="/template/BasicTemplate.xhtml">
    <ui:define name="content">
        <h:outputStylesheet library="css" name="style.css" />
        ...
    </ui:define>
</ui:composition>

By the way, the way how you used the generic content type "css" as library name is awkward. As you don't seem to have a real library, just omit it altogether:

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

CSS not applying in JSF application

1 Answers1

See also: