<ui:composition
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:h="http://xmlns.jcp.org/jsf/html"
        xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:outputStylesheet id="slideoutCSS">
<!-- EXAMPLE-SOURCE-START -->
/* Custom styles for the SlideOut */
.hover-panel {
    border-color: red;
    border-width: 5px;
}
.hover-handle {
    padding: 8px;
    font-size: 14px;
    color: white !important;
    background-color: red;
}
.reverse-panel {
    border-color: blue;
    border-width: 5px;
}
.reverse-handle {
    padding: 8px;
    font-size: 14px;
    color: white !important;
    background-color: blue;
}
.auto-panel {
    border-color: orange;
    border-width: 5px;
}
.auto-handle {
    padding: 8px;
    font-size: 14px;
    color: white !important;
    background-color: orange;
}
<!-- EXAMPLE-SOURCE-END -->
</h:outputStylesheet>
</ui:composition>