I have a JSF facelet that has a String of text that I would like to style using CSS. It is in an h1 tag:
<h1 align="center">Welcome Back</h1>
My questions are, first, where in the directory structure of the JSF app would the CSS file go, and 2nd, how would I add the CSS styling to the text?
Thanks!
I have a JSF facelet that has a String of text that I would like to style using CSS. It is in an h1 tag:
<h1 align="center">Welcome Back</h1>
That's a good idea. The align attribute is invalid HTML5. CSS goes in the style attribute, or better, in its own .css file. You should strive to keep your JSF/HTML code free of style attributes (and thus all the styling goes in .css file).
My questions are, first, where in the directory structure of the JSF app would the CSS file go
All JSF resources should go in the /resources folder (if necessary divided further in subfolders). Here's a rather basic example:
WebContent
|-- META-INF
|-- WEB-INF
| |-- template.xhtml
| |-- faces-config.xml
| `-- web.xml
|-- resources
| |-- image.png
| |-- script.js
| `-- style.css
`-- index.xhtml
You need to reference it as follows in the <h:head> of the master template.
<h:outputStylesheet name="style.css" />
(equivalently there are <h:outputScript> and <h:graphicImage> for JS and images)
and 2nd, how would I add the CSS styling to the text?
Just by the following entry in style.css, provided that your website is designed in such way that it has only one <h1> in the master layout template which is the same throughout the site.
h1 {
text-align: center;
}
Otherwise you'd need to give it an id or class instead. When writing CSS for JSF, please keep in mind that CSS works on JSF-generated HTML output in the client side only, not on JSF source code in the server side. So, when in doubt about the HTML output, open the JSF page in webbrowser and do View Source (or a tree inspection with webbrowser's developer toolset).
