Adding css to Java Server Faces (JSF)

Question

I'm trying to add styles in JSF using css, but I try to open the xhtml, it won't recognize the style. I've been searching how to do it and I found this:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>Hello</title>
        <h:outputStylesheet library="css" name="style.css" />
    </h:head>
    <h:body>
        <div> 
            <h1>Hello</h1>
        </div>
        <div> 

        </div>
    </h:body>
</html>

And as I understood I have to create my css file in the next folder:

WebPage
|_WEB-INF
|_resources
  |_css
    |_style.css

I'm using Netbeans 8.0.2 and JSF 2.2

With the last changes I got this:

<h:head> 
<h:outputStylesheet name="./css/style.css"/> 
</h:head> <h:body> 
</h:body>
<style type="text/css"></style></html>

It is also very irritating to hunt bugs when there is no bugs at all. What you can try is to clear browser cache before loading your styled page just to be sure that your style.css is not cached with some old values. — Aleksandr Erokhin, May 28 '15 at 18:10
@BalusC you don't have to be that rude. I thought that with that information someone can solve my problem. Anyway, I tried Dinie solution but it didn't work. I've already change my question so you can know what I got in developer's perspective — Sebastián Ulloa, May 31 '15 at 18:41

score -1 · Answer 1 · answered May 27 '15 at 17:14

-1

Open developer tools in your browser and load the page, if you get a 404 for style.css then take a look at the answer provided by Sebastián Ulloa

answered May 27 '15 at 17:14

the_seeker_who

9
1
2

score -3 · Answer 2 · answered May 27 '15 at 17:07

-3

Can you try moving this line

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

Just after body tag like this:

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

answered May 27 '15 at 17:07

JeisonG

234
2
12

Man.... Do **NOT** put your `` tags inside the body, the head tag is for they. – Dinei May 27 '15 at 17:51
@Dinel: JSF will autorelocate it to end of head. This is thus not the problem here. See also http://stackoverflow.com/q/8367421. However, the problem here is that Jeison apparently found this "solution" in some answer specific to users who are trying to override CSS from a JSF component library, such as answered here http://stackoverflow.com/q/8768317. However, there's totally no means of using a component library as per the question in its current form. – BalusC May 27 '15 at 18:23
@BalusC,@Dinel, I really wanted to comment instead of an answer, but my score did not allow me. I learn for the next :) – JeisonG May 27 '15 at 22:21

Adding css to Java Server Faces (JSF)

2 Answers2