Three Ways to Insert CSS
There are three ways of inserting a style sheet:
- External style sheet
- Internal style sheet
- Inline style
The Inline style is specific to the tag itself. The inline style uses the HTML "style" attribute to style a specific tag. This is not recommended, as every CSS change has to be made in every tag that has the inline style applied to it. The Inline style is good for one an individual CSS change that you do not use repeatedly through the site.
Example for Inline Style
Example 1
<zk>
<label value="Welcome to ZK" style="color: red; font-style: oblique;"/>
</zk>
Example 2
Download zul file
ZK sclass attribute
You should specify a CSS class name as the attribute value.
Using the Style Tag , we can also define the style in the top of the zul file as follows
<zk>
<style>
.banner { background-color:red; color: white; padding: 5px
10px; }
</style>
<separator></separator>
<div sclass="banner"/>
<separator></separator>
</zk>
Styling Class (aka. sclass) is a way to add extra CSS Class to a component. By default, nothing is assigned to sclass (i.e. empty). Once it is assigned with a non-empty value (HtmlBasedComponent.setSclass(String)), it will be added to the root element as an additional CSS class.
For example, assign sclass foo-pretty to a button component in zul page like this
<!-- index.zul -->
<button sclass="foo-pretty"/>
will generate the following output
<!-- HTML output -->
<button class="z-button foo-pretty" />
Sclass won't change the naming of the default CSS classes, so all the default CSS rules will be applied and inherited. It is useful to fine-tune a particular component.
CSS customization might depend on the DOM structure of the Particular Element.
The following video explains how you can identify the CSS Class used by ZK and customize according your need.
Download zul file
Example 2:
Download zul file