JSF components as selectors for css styles

Question

Choosing a component as a selector in a css file is quite simple. The pattern is

selector { attribute: value; ... }

I could choose say <p> as a selector as an HTML tag but how does it work with JSF tags?

I found out that you can use HTML equivalents of JSF tags, e.g.
h:inputText to <input> ... but that is just about the only JSF-HTML conversion I know ... :)
Where can I find all corresponding tags?

Are there any other methods of styling JSF components with css?

I've been reading about JSF in detail since 2 tweeks or so. Before that I did more backend-technologies, so thank you for your overview :) — Wecherowski, Jul 15 '16 at 11:29

score 1 · Answer 1 · answered Jul 13 '16 at 22:25

Every (or most) UIComponent in the JSF library has an attribute to set CSS styling for your personal use: styleClass which in the back will set the CSS class attribute for the resulting HTML code so here's an example:

<h:outputText value="here is my text"
              styleClass="some-class" />

Now in your CSS:

.some-class{
  color: red;
}

This is how you would proceed to add styling to JSF UIComponents.

JSF components as selectors for css styles

1 Answers1