Add css style to xhtml from resources

Question

I am new to jsf. I have an xhtml login window which direct you to a welcome site. On the welcome site I want to style according to the css file which lays under webcontent - resources - css.

I have made an link to the css file in the head

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

and then I give a heading an id and attach a color to the id in the css file. But it does not work. The funny thing is that it works when I want a heading in my login window. What am I doing wrong in welcome?

Login:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>#{msgs.title}</title>
        <h:outputStylesheet library="css" name="styles.css"/>
    </h:head>
    <h:body>
        <h:form>
            <h3 id="name">#{msgs.heading}</h3>
        </h:form>
    </h:body>
</html>

Welcome:

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>#{msgs.title}</title>
        <h:outputStylesheet library="css" name="styles.css"/>
    </h:head>
    <h:body>
        <h:form >
            <h3>
                #{msgs.welcome}
                <h:outputText value="#{userBean.user.name}" id="name"/>
            </h3>
        <h:form>
    </h:body>
</html>

CSS:

@CHARSET "ISO-8859-1";

.name {
    color: blue;
}

BalusC · Accepted Answer · 2011-10-31 18:49:08Z

2

This should never have worked in both cases. You've specified a CSS class selector .name, but you haven't specifyed a class="name" anywhere. You've only specified an id="name". The CSS class selectors won't select elements by ID.

So, there are 2 solutions:

Replace the class selector .name by ID selector #name in your CSS:
```
#name {
    color: blue; 
}
```
Or, replace id="name" by class="name" in normal HTML elements and by styleClass="name" in JSF components:
```
<h3 class="name">
```
and
```
<h:outputText styleClass="name">
```

Option 2 is semantically more correct in your particular markup. You should never use the same ID on semantically completely different elements throughout the entire website.

Collectives™ on Stack Overflow

Add css style to xhtml from resources

1 Answer 1

See also:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

See also:

Comments

Your Answer

Sign up or log in

Post as a guest

Related