How best to define default styles in widget libraries for public use?

Question

I'm putting together some code to go with my blog, and it will include a custom component. I'd like the default component to use a style I define, but I'd also like the user to be able to easily override this. Does anyone have any suggestions on the best way to do this?
I notice that the [url http://www.jidesoft.com/blog/2011/10/04/meet-our-first-javafx-component/]range slider from JideSoft has us explicitly setting the skin in code in their example. Ideally the end-user would not be doing this. So what is the best practice? Should I build a custom skin for my component and then set the style in my code? Should I define a base style sheet that somehow always gets imported, etc?
In essence, I want to have my base styles work in the same way that caspian.css does - is there a way?

Answer 1

Thanks Jonathan, really helpful responses.
I think my control would be a candidate for a style-2 approach if the method was moved up to Parent as you suggested. If I understood it all right then I'm glad you have been pushing for this, and I'm glad David has been persuaded :)
I've got basic skinning for my component working, but I'm stuck on the getUserAgentStylesheet() method.
My widget is basically a NavigationToolbar with back, forward, home, refresh buttons - simple sort of thing.
I have done this:
public class NavigationToolbar extends Control implements NavigationListener
    private BooleanProperty backAllowed;
    private BooleanProperty forwardAllowed;
    public NavigationToolbar()
        getStyleClass().add("navigation-toolbar");
        this.backAllowed = new SimpleBooleanProperty();
        this.forwardAllowed = new SimpleBooleanProperty();
    ... getters/setters ...
    protected String getUserAgentStylesheet()
        return "styles/nav-toolbar.css";
}Then I have created Skin in the same package, which is basically my real view (what I previously had in the NavigationToolbar class before I made the unfortunate decision to make it nice an skinnable :) ):
public class NavigationToolbarSkin implements Skin
    private NavigationToolbar navigationToolbar;
    private HBox root;
    private Button backButton;
    private Button forwardButton;
    public NavigationToolbarSkin(NavigationToolbar navigationToolbar)
        this.navigationToolbar = navigationToolba
        root = new HBox(4);
        backButton = new Button("Back");
        backButton.getStyleClass().add("back");
        backButton.disableProperty().bind(navigationToolbar.backAllowedProperty().not());
        root.getChildren().add(backButton);
        forwardButton = new Button("Forward");
        forwardButton.getStyleClass().add("forward");
        forwardButton.disableProperty().bind(navigationToolbar.forwardAllowedProperty().not());
        root.getChildren().add(forwardButton);
}My nav-toolbar.css looks like:
.navigation-toolbar {
    -fx-skin: "com.zenjava.jfxflow.navigation.NavigationToolbarSkin"
.back {
    -fx-graphic: url("../images/nav-back.png");
.forward {
    -fx-graphic: url("../images/nav-forward.png");
... other styles ...When I try and use this in code (I just 'new' a NavigationToolbar instance and then add it to the scene, am I suppose to do something more?), I get the following error:
SEVERE: javafx.scene.control.Control impl_processCSS The -fx-skin property has not been defined in CSS for NavigationToolbar@31ad98ef[styleClass=root navigation-toolbar]If I manually set the skin on the toolbar (i.e. setStyle("-fx-skin: \"com.zenjava.jfxflow.navigation.NavigationToolbarSkin\"") ) it works, although obviously I don't have any of my other styles with it. I wondered if maybe it was just a URL issue so I've tried with the css in the root directory as well, and tried various paths (with a slash at front, without, etc). No luck - if you can tell me this is the problem then I can keep mucking around with it, but I'm thinking maybe I have missed a step or misunderstood and cocked up one of the steps above?
Cheers for your help, much appreciated!
zonski