In my last blog, I wrote a simple spinner component. In this posting, I'll add styling to it using the outputStylesheet tag, and a separate css file.
The <h:outputStylesheet/> tag is a way to output a cached stylesheet instance to a JSF page - just use it with a "name" attribute, where the name is the name of a css file in the resources directory of your web app. Since this is the same resources directory where you're already putting the composite component definition files, this means that you can now have a directory that looks like this:
We're also going to remind you how to override the existing styling of a component - so I'll also create a .css file for the calling page - we'll call it "calling.css", and place it in a higher level resource directory. So, here's the overall layout for our app now:
So, let's see what we've got - here's the part of the component file that we had to change to add styling, with the important parts marked in bold: