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 <link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/style.css" /> ? — Kuba
– Kuba, Commented Dec 2, 2013 at 18:30

Community · Accepted Answer · 2017-05-23 12:22:06Z

3

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" />

3 Comments

user2727493 Over a year ago

Hi baluSC thanks for replay but i have places everything as suggested by use its not working:(

user2727493 Over a year ago

here is my code in detail \JSFFaceletsTutorial\WebContent\template\Login.xhtml <ui:composition template="/template/BasicTemplate.xhtml"> <ui:define name="content"> <h:form> dfdskdksdk <h:outputText value="#{msg['message.test1']}" /> <table width="80%"> <tr> <h:outputStylesheet name="css/style.css" /> <td width="15%" class="tablewidth"> <b>Location Coverage*</b> </td>

BalusC Over a year ago

What does the generated HTML output say as to the <link href> value and what does the HTTP traffic monitor say as to response status/body of downloading the css/style.css file?

Collectives™ on Stack Overflow

CSS not applying in JSF application

1 Answer 1

See also:

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

See also:

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related