css doesnt work with html component

Question

I dont understand why css classes doesnt work.

newcss.css:

.greenClass {
    color: green;
}

index.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>
        <h:outputStylesheet library="css" name="newcss.css"/>
    </h:head>
    <h:form styleClass="greenClass">
        <h:outputLabel styleClass="greenClass" value="AAA"/>
    </h:form>
</html>

HTML code

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head id="j_idt2"><link type="text/css" rel="stylesheet" href="/WA/faces/javax.faces.resource/newcss.css" /></head>
<form id="j_idt4" name="j_idt4" method="post" action="/WA/faces/index.xhtml" class="greenClass" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt4" value="j_idt4" />
<label class="greenClass">AAA</label><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-7146797988252848648:-7580080555543519594" autocomplete="off" />
</form>
</html>

and this doesnt work

<?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:form>
        <h:outputLabel styleClass="greenClass" value="AAA"/>
    </h:form>
</html>

But the following works correctly:

<?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:form>
        <h:outputLabel style="color: green" value="AAA"/>
    </h:form>
</html>

HTML Code:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<form id="j_idt2" name="j_idt2" method="post" action="/WA/faces/index.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt2" value="j_idt2" />
<label style="color:green">AAA</label><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="8578298320156968921:4997153480898762925" autocomplete="off" />
</form>
</html>

Can you explain what can be reason of this and how to fix this?

If you look in your browser's console when it "doesn't work," is it able to fetch the stylesheet file? If so what's in the stylesheet? — Matt Ball
– Matt Ball, Commented Nov 30, 2013 at 16:18

Ric · Accepted Answer · 2013-11-30 16:07:38Z

2

In your example, that doesn't work, you're missing the

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

part.

answered Nov 30, 2013 at 16:07

Ric

1143 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

css doesnt work with html component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related