How to add CSS to struts2 tags

Question

Hi,

I am using struts2 to build a web application and I use struts2 tags extensively. I am not able to apply CSS styles to my struts2 textfields, buttons, labels etc., What is the trick for setting CSS rules to struts2 UI components.

Please help

Answer 1

CSS knows nothing about server side technologies. CSS can only be applied on plain HTML and it will only happen at the client side. Thus, if you don't know what kind of HTML exactly MVC frameworks like Struts2 generates, then you'll need to consult its documentation and/or learn it based on the generated page source in the client side. To find it, just open the webpage in your favourite browser, rightclick and choose View Source (or something like that). Finally just write CSS accordingly based on what you've seen in the page source. As with most of self-respected component based MVC frameworks, you can give the Struts2 components just an id, style and/or class (styleClass) attribute which you can use for CSS.

Answer 2

The struts2 tags have two attributes that are used for this, the cssClass and the cssStyle attributes. The cssClass attribute takes the name of a class that you create in your CSS file. The cssStyle attribute take a string representing CSS style. E.g.

 <s:checkbox cssClass="mycheckbox" label="checkbox test" name="checkboxField1" value="aBoolean" fieldValue="true"/>

and

  <style>
      .mycheckbox{
        /* Your style here */
      }

  </style>