title: In JavaFX, how can I switch skins using CSS?
body: <p>What is the correct place to define a <code>Skin</code> via CSS in JavaFX?  Say I have a very simple custom control...</p>
  
  <pre class="lang-java prettyprint-override"><code>public class ActionLink extends Control {
      private final StringProperty text = new SimpleStringProperty();
      public final StringProperty textProperty() {return text;}
      public final String getText() {return text.get();}
      public final void setText(String text) {this.text.set(text);}
  }
  </code></pre>
  
  <p>I know that I can specify the default skin in the control.  Assuming I have an <code>ActionLinkSkin</code>...</p>
  
  <pre class="lang-java prettyprint-override"><code>@Override
  protected Skin&lt;?&gt; createDefaultSkin() {
      return new ActionLinkSkin(this);
  }
  </code></pre>
  
  <p>If I don't use <code>createDefaultSkin()</code>, I see a <code>SEVERE</code> warning indicating a skin can't be found:</p>
  
  <pre class="lang-none prettyprint-override"><code>The -fx-skin property has not been defined in CSS for ActionLink@59ebabd \
    and createDefaultSkin() returned null.
  </code></pre>
  
  <p>First off, I'm not certain where the control's CSS belongs.  Should I be using a stylesheet for the control, <code>action-link.css</code>, or should I be using a stylesheet for the skin, <code>action-link-skin.css</code>?  To me, it seems like the skin and CSS are going to be fairly interdependent, but using a stylesheet for the control seems to be more popular.</p>
  
  <p>Second, and my main problem, I don't know where to define <code>-fx-skin</code> so it gets discovered correctly.</p>
  
  <p>Now, assuming I have my CSS set up correctly, what if I want to include an alternate skin, <code>ActionLinkButtonSkin</code>?  Is there a way it can be set up so a parent component can select either skin via CSS?  For example:</p>
  
  <pre class="lang-css prettyprint-override"><code>.action-link {
      -fx-skin: "ActionLinkSkin";
  }
  </code></pre>
  
  <p>...or:</p>
  
  <pre class="lang-css prettyprint-override"><code>.action-link {
      -fx-skin: "ActionLinkButtonSkin";
  }
  </code></pre>