css not working in jsf

Question

I was created css file for prime-faces and i have tired to make it but not working .

this is my style.css file

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org        /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
*{
 padding:0px;
 margin:0px;

}
 body{
background-color:#ffffff;
  }
 .head1{
background-repeat:repeat-x;
background-image: url('images/rd-el_03.png');
height:174px;
 }
 .head2{
background-image: url('images/rd-el_02.png');
width:364px;
height:174px;
margin-left:auto;
margin-right:auto;
background-repeat:no-repeat;
  }
 img{
 border:0;
  }
 .footer1{
   background-image: url('images/rd-el_07.png');
  height:87px;
  background-repeat:repeat-x;   
  }
  .footer2{
  background-image: url('images/rd-el_06.png');
  float:left;
  width:89px;
  height:87px;
  background-repeat:no-repeat;

   }
 .footer3{
   background-image: url('images/rd-el_09.png');
  width:272px;
 height:87px;
 float:right;
 background-repeat:no-repeat;

  }
 </style>
 </head>

 <body>
  <div class="head1">
 <div class="head2"></div>
</div>

 <div class="footer1">
 <a href="http://tl4s.com.sa" title="تصميم منتدى"><div class="footer2"></div></a>
 <div class="footer3"></div>
 </div>



  </body>

 </html>

this style.css is under WebContent |-- resources | -- css |-- style.css :

I have putted this code in my xhtml file but no luck

 <h:head>
  <h:outputStylesheet name="css/styles.css" />
 </h:head>

score 1 · Answer 1 · answered Aug 15 '13 at 23:12

Well, it doesn't look like a CSS file. It is a HTML/XHTML file which has CSS code embedded in it. Remove all that HTML code and everything that is inside of tags, put it in that CSS file! That will work. So a CSS file looks like:

----------------------------------START----------------

.body{
 css code here
}

.property1{
 css code here
}

-------------------------------------------end------------------

There should be absolutely nothing else in it.

score 0 · Answer 2 · edited Mar 20 '15 at 09:24

Hi I had the same problem.

I resolved it by firstly using the <h:outputStyleSheet> tag And I don't know if this will work for you because I'm using Maven, so you have to make sure your resource folder is inside:

webapp->resources->css->styles.css

and inside you <h:head> put the following line. This is how JSF 2 references css files:

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

Hope this helps Goodluck

css not working in jsf

2 Answers2