How to refer CSS File in ZK Style tag

In this example, we will see how to create CSS file as separate file and include in zul file to change the look and feel

Project structure as folllows

Index.zul file Content
<?page title="Auto Generated index.zul"?>
<zk>
    <style src="/resources/css/mycss.css"/>
    <window title="Hello World!!" border="normal" width="200px">
        <button label="click" mold="trendy" sclass="myButtonClassStyle"
            onClick="" />
    </window>
</zk>
mycss.css file
/*ZCS:1.0,5.0:
Information : Generated by ZK Studio Style Designer, compatible with ZK 3.5.2;
Don't edit any content between SEC and SEC_E comments.
*//*SEC:BUTTON-DEFAULT:myButtonClassStyle*/
/*RULE:CENTER-MIDDLE*/
.myButtonClassStyle.z-button .z-button-cm{
    font-family : sans-serif; /*PRO*/
    color : #FFFF00; /*PRO*/
    background-color : #FF8080; /*PRO*/
    background-image : none; /*PRO*/
    background-position : center center;
}
/*RULE_E*//*RULE:TOP-LEFT*/
.myButtonClassStyle.z-button .z-button-tl{
    background-color : #FF8080; /*PRO*/
    background-image : none; /*PRO*/
    background-position : top left;
}
/*RULE_E*//*RULE:TOP-MIDDLE*/
.myButtonClassStyle.z-button .z-button-tm{
    background-color : #FF8080; /*PRO*/
    background-image : none; /*PRO*/
    background-position : top center;
}
/*RULE_E*//*RULE:TOP-RIGHT*/
.myButtonClassStyle.z-button .z-button-tr{
    background-color : #FF8080; /*PRO*/
    background-image : none; /*PRO*/
    background-position : top right;
}
/*RULE_E*//*RULE:BOTTOM-LEFT*/
.myButtonClassStyle.z-button .z-button-bl{
    background-color : #FF8080; /*PRO*/
    background-image : none; /*PRO*/
    background-position : bottom left;
}
/*RULE_E*//*RULE:BOTTOM-MIDDLE*/
.myButtonClassStyle.z-button .z-button-bm{
    background-color : #FF8080; /*PRO*/
    background-image : none; /*PRO*/
    background-position : bottom center;
}
/*RULE_E*//*RULE:BOTTOM-RIGHT*/
.myButtonClassStyle.z-button .z-button-br{
    background-color : #FF8080; /*PRO*/
    background-image : none; /*PRO*/
    background-position : bottom right;
}
/*RULE_E*//*RULE:CENTER-LEFT*/
.myButtonClassStyle.z-button .z-button-cl{
    background-color : #FF8080; /*PRO*/
    background-image : none; /*PRO*/
    background-position : center left;
}
/*RULE_E*//*RULE:CENTER-RIGHT*/
.myButtonClassStyle.z-button .z-button-cr{
    background-color : #FF8080; /*PRO*/
    background-image : none; /*PRO*/
    background-position : center right;
}
/*RULE_E*/
/*SEC_E*/

Output