4

This is my project structure:

enter image description here

I am going to add css file into HeaderTester.xhtml file:

This is HeaderTester.xhtml:

<?xml version='1.0' encoding='UTF-8' ?> <!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" xmlns:h="http://xmlns.jcp.org/jsf/html"> <h:head> <title>Here is header</title> <link rel="stylesheet" type="text/css" href="headerStyle.css"/> </h:head> <h:body> This is Header tester class <div id="header"> <h3>Sajjad HTlo</h3> </div> </h:body> </html>

Css File:

*{ margin: 0; padding: 0; } #header{ background-color: gray; width: 100%; height: 60px; } h1{ color: silver; }

But just displays texts in result!

Improve this question
2
  • 1
    stackoverflow.com/q/11988415/1391249 Commented Feb 14, 2015 at 17:43
  • @Tiny thanks for the link, thats a very detailed explanation Commented Feb 14, 2015 at 17:46

1 Answer 1

Reset to default
8

Regarding your XML namespaces declaration, you are using JSF 2.2.

Since JSF 2.0, you can place CSS, JavaScript files and images(and other files) into a resources directory in the root of your web application.

css

Then, you can include your CSS using the h:outputStylesheet :

<h:outputStylesheet library="css" name="styles.css"/>
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

So there is no need to <link rel="stylesheet" type="text/css" href="headerStyle.css"/> . Correct?
@SajjadHTLO No you will not need it, the h:outputStylesheet will generate a tag of this form: <link href="/context-root/faces/javax.faces.resource/styles.css?ln=css" rel="stylesheet" type="text/css"/> to the header of your page