CSS Classes and Styles

CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of a (HTML) document. It is an important part of ZK to customize component's look and feel. If you are not familiar with CSS, please refer to CSS Tutorial.

There are a set of methods that could be used to set CSS styles for an individual component.

• HtmlBasedComponent.setStyle(String) assigns CSS styles directly to a component
• HtmlBasedComponent.setSclass(String) (i.e., sclass) assigns one or multiple CSS style classes to a component.
• HtmlBasedComponent.setZclass(String) (i.e., zclass) assigns the main CSS style class to a component. Unlike style and sclass, if zclass is changed, all default CSS styles won't be applied.
• Some components have a so-called content area and they have a separated set of methods to change the CSS style of the content area, such as Window.setContentStyle(String) and Window.setContentSclass(String).

style

Specifying the style is straightforward:

<textbox style="color: red; font-style: oblique;"/>

or, in Java:

Textbox tb = new Textbox();
tb.setStyle("color: red; font-style: oblique;");

Notice that the DOM structures of many ZUL components are complicate, and CSS customization might depend on the DOM structure. For more information about how individual component is styled, please refer to ZK Style Guide.

Version History

Version	Date	Content