How to specify styles for h:panelgrid in jsf

Tags: css,jsf,jsf-2

Problem :

I using a simple h:panelGrid for displaying the table how could i specify styles for the table to make it better. i am a bit confused with all the stuff i looked online This is what the code that i have been using

<h:panelGrid id="panel" columns="2"  cellpadding="10"
            cellspacing="1" style="align:center;">
            <f:facet name="header">
                <h:outputText value="Registration" />
            <h:outputText value="User Name:" escape="false" />
        <h:inputText value="Hello World" />
            <h:outputText value="Password:" escape="false" />
            <h:inputSecret value="" />

Could you please specify the list of opssible optons for specifying the css or inline styles for elements in jsf Thanks in advance

Solution :

Don't try to use inline styles. Since jsf is a html code generator in this regard, inline styles ofthen do not apply to the html element you want them applied to. Use the styleClass attribute,and create css with the right selectors for the html elements you want to style. Use the apllied class in those selectors

See also

    CSS Howto..

    How to hide the toolbar in Chrome for Android tablets for a 100% high website

    How to vertically align a DIV next to an image?

    how to horizontally center a div of 10000px (wider than full screen) in CSS?

    How to handle this CSS issue with Wordpress?

    How to create vertical ruler in CSS/html?

    How to override the slide effect to dissolve effect in JQuery Mobile using CSS3 feautures?

    How to prevent mouseenter event action with jQuery

    How to remove Menu Item Class form secondary menu

    How to center a text nav bar with CSS

    How to access dynamic div inside any div using CSS

    How to adjust CSS to display correctly in IE 6?

    How to keep website footer at bottom even when page expands downwards

    How do I make the background fit the full size of the screen no matter what size the monitor is?

    How would I make these two elements on the same line?

    How to make input text bigger in bootstrap css framework?

    How to use one icon from different image files?

    Multiple buttons in CSS + Button with an image not showing properly

    How to include by default icon inside a textarea

    how to display div one by one using css

    AngularJS: with ng-animate & ng-view, how to make a 3D cube rotation effect?

    How to set the color to the user's link color in CSS?

    How to show css div depending upon model value?

    Jquery-How to grey out the background while showing the loading icon over it

    In a responsive layout how can I get divs to shrink uniformly?

    How to left-align the text in a Bootstrap accordion

    bootstrap css, how to make full width div inside container

    CSS/Bootstrap: How to stretch containers within cols full-height?

    How to make a web form with 3 columns?

    CSS: how to style a div so that it has no effect

    activating “authorization” causes CSS stop working! how solve it?