how to implement CSS and JavaScript in JSf File?

There is nothing special. You can do it in the same way it's done without jsf. Here is some examples: http://www.ibm.com/developerworks/web/library/wa-aj-jsfcss1/index.html

The point of using JSF is to avoid writing JavaScript unless it is absolutely necessary. JSF allows you to specify the .css file or to skin the complete application using an already available skin which would vary depending on your choice of JSF implementation. You just need to add one tag to your faces-config.xml.

<skin-family>myskin</skin-family>

If you can be more specific regarding what you are trying to accomplish through JS, I am sure that BalusC and others here will suggest you an easier way to do it through JSF itself..

There are different solutions to your question, depending on what you want to do.

1. You can use

   <h:outputScript ... />
   <h:outputStylesheet ... />
   

   to include certain scripts or stylesheets in a page.

2. You could use a template to include standard-stylesheets and scripts that should be available on every page.

3. You could use the "styleClass" and "style" attributes of JSF components for CSS-Styling and the JS event handler like onclick, onblur, etc. to invoke any javascript you like.

HTH