Including Css in jsf

Question

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!

@Tiny thanks for the link, thats a very detailed explanation — Tarik, Feb 14 '15 at 17:46

Tarik · Accepted Answer · 2015-02-14T17:42:33.320

7

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

edited Feb 14 '15 at 17:42

answered Feb 14 '15 at 17:37

Tarik

4,961
3
36
67

So there is no need to `` . Correct? – Feb 14 '15 at 18:53
@SajjadHTLO No you will not need it, the `h:outputStylesheet` will generate a tag of this form: `` to the header of your page – Tarik Feb 14 '15 at 19:01

Including Css in jsf

1 Answers1