The style component is used to specify CSS styles in a ZUML page. The simplest format is as follows.

<style>
.blue {
color: white; background-color: blue;
}
</style>
<button label="OK" sclass="blue"/>

Tip: To configure a style sheet for the whole application, specify theme-uri in zk.xml, refer to Appendix B in the Developer's Reference for details. To configure a style sheet for a language, use the language addon, refer to the Component Development Guide.

Sometimes it is better to store all CSS definitions in an independent file, say my.css. Then, we could reference it by use of the style component as follows.

<style src="/my.css"/>

The above statement actually sends the following HTML tags^[46] to the browser, so the specified file must be accessible by the browser.

<link rel="stylesheet" href="/css/mystyles.css"/>

In other words, you cannot specify "/WEB-INF/xx" or "C:/xx/yy".

Like other URI, it accepts "*" for loading browser and Locale dependent style sheet. Refer to the Browser and Locale Dependent URI section in the Internationalization chapter for details.