## Styling via CSS

Using CSS to style the artefacts that jsPlumb creates is a lot more flexible than using `paintStyle` or `hoverPaintStyle`, as previously discussed, but due to the fact that the Canvas renderer is completely unaware of CSS, and also that you cannot style things like stroke color or line width in VML, it's only really useful for SVG. Of course, if you know your users won't be using VML then it's a great choice - and nowadays that is just a question of whether or not you will have any users on versions of IE earlier than 9.

On this page we'll first run through the default CSS classes that jsPlumb attaches, followed by a quick explanation for how to attach your own, and then we'll discuss how to style SVG (and then how you would style VML, if it were supported)

### Z Index

One thing you can - and should - use CSS for, regardless of the renderer, is z-index. Every Connection, Endpoint and Overlay in jsPlumb adds some element to the UI, and you should take care to establish appropriate z-indices for each of these, in conjunction with the nodes in your application.

### Basic CSS classes

By default, jsPlumb adds a specific class to each of the three types of elements it creates (These class names are exposed on the jsPlumb object and can be overridden if you need to do so - see the third column in the table)

Component | CSS Class | jsPlumb Member
--- | --- | ---
Connector | _jsPlumb_connector | connectorClass
Endpoint | _jsPlumb_endpoint | endpointClass
Endpoint when full | _jsPlumb_endpoint_full | endpointFullClass
Overlay | _jsPlumb_overlay | overlayClass

In a simple UI, you can set appropriate z-index values for these classes. The jsPlumb demo pages, for instance, typically use a class of `.window` for the nodes in each demo page, and the z-index of the UI is controlled with CSS rules like this:

    .window { z-index:20; }
    ._jsPlumb_connector { z-index:4; }
    ._jsPlumb_endpoint { z-index:5; }
    ._jsPlumb_overlay { z-index:6; }

### Interactive CSS Classes

jsPlumb assigns these classes on both Connectors and Endpoints when specific user interactivity occurs:

Activity | CSS Class | jsPlumb Member | Description
Mouse Hover | jsPlumb_hover | hoverClass | Assigned to both Connectors and Endpoints when the mouse is hovering over them
Connection Drag | _jsPlumb_dragging | draggingClass | Assigned to a Connection when it is being dragged (either a new Connection or an existing Connection)
Element Dragging | _jsPlumb_element_dragging | elementDraggingClass | Assigned to all Connections whose source or target element is currently being dragged, and to their Endpoints.
Source Element Dragging | _jsPlumb_source_element_dragging | sourceElementDraggingClass | Assigned to all Connections whose source element is being dragged, and to their Endpoints
Target Element Dragging | _jsPlumb_target_element_dragging | targetElementDraggingClass | Assigned to all Connections whose target element is being dragged, and to their Endpoints
Anchor Class | _jsPlumb_endpoint_anchor | endpointAnchorClassPrefix | Assigned to Endpoints, and their associated elements, that have either a static Anchor with an associated class, or a Dynamic Anchor whose individual locations have an associated CSS class. The `` suffix in the class name above is the associated class. Note that this class is added to both the artefact that jsPlumb creates and also the element on which the Endpoint resides, so you will normally have to build a selector with more criteria than just this class in order to target things properly. See the documentation regarding Anchors for a discussion of this.
Drop Allowed on Endpoint | _jsPlumb_endpoint_drop_allowed | endpointDropAllowedClass | Assigned to an Endpoint when another Endpoint is hovering over it and a drop would be allowed
Drop Forbidden on Endpoint | _jsPlumb_endpoint_drop_forbidden | endpointDropForbiddenClass | Assigned to an Endpoint when another Endpoint is hovering over it and a drop would not be allowed
Connection Hover | _jsPlumb_source_hover | hoverSourceClass | Assigned to the source element in a Connection when the mouse is hovering over the Connection
Connection Hover | _jsPlumb_target_hover | hoverTargetClass | Assigned to the target element in a Connection when the mouse is hovering over the Connection
Drag | _jsPlumb_drag_select | dragSelectClass | Assigned to the document body whenever a drag is in progress. Mostly for MooTools/YUI, it allows you to ensure document selection is disabled - see here

Note the last two classes work in conjunction with the `checkDropAllowed` interceptor that you can register on jsPlumb. For more information about interceptors, see here, but in a nutshell you just provide a function that takes the two Endpoints and a Connection as argument, and returns whether not a drop would be allowed:

    jsPlumb.bind("checkDropAllowed", function(params) {
      // Here you have access to:
      // params.sourceEndpoint
      // params.targetEndpoint
      // params.connection

      return true; // or false.  in this case we say drop is allowed.
    });

### Preventing selection while dragging

MooTools and YUI3 do not prevent the default browser behaviour of selecting DOM elements when dragging, so jsPlumb puts a class on the body that you can use to disable it yourself:

    _jsPlumb_drag_select

A suitable value for this (from the jsPlumb demos) is:

    ._jsPlumb_drag_select {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

### Custom CSS Classes

In addition to the default CSS classes, each of the main methods you use to configure Endpoints or make Connections in jsPlumb support the following two parameters:

- cssClass - class(es) to set on the display elements
- hoverClass - class(es) to set on the display elements when in hover mode

In addition, addEndpoint and makeSource allow you to specify what these classes will be for any Connections that are dragged from them:

- connectorClass - class(es) to set on the display elements of Connections
- connectorHoverClass - class(es) to set on the display elements of Connections when in hover mode

These parameters should be supplied as a String; they will be appended as-is to the class member, so feel free to include multiple classes. jsPlumb won't even know.

### CSS for SVG elements

#### Connections

SVG connections in jsPlumb consist of a parent `svg` element, inside of which there are one or more `path` elements, depending on whether or not you have specified an `outlineStyle`. To target the path element for some connection, you need a rule like this:

    svg .path {
      stroke:'red'
    }

Hooking this up to the custom class mechanism, you might do something like this:

    jsPlumb.connect({
      source:"someElement",
      target:"someOtherElement",
      cssClass:"redLine"
    });

CSS:

    svg .path.redLine {
      stroke:'red';
      stroke-width:3;
    }

You might be thinking to yourself, why have the `svg .path` prefix to this? In fact it is perhaps not required: it's just there to call out the fact that this is a style on an SVG connector.

#### Endpoints

SVG Endpoints created by jsPlumb consist of an `svg` parent element, inside of which there is some shape, the tag name of which depends on the type of Endpoint:

Endpoint Type | SVG Shape
--- | ---
Rectangle | rect
Dot | circle

So you can choose, when writing CSS rules for these, whether or not you specify the shape exactly, or just leave it up to a wildcard:

    jsPlumb.addEndpoint("someElement", {
      cssClass:"aRedEndpoint",
      endpoint:"Dot"
    });

CSS:

    .svg circle.aRedEndpoint {
      fill:"red"
    }

...or:

    .svg *.aRedEndpoint {
      fill:"red"
    }

For a full discussion of the properties you can configure on an SVG element via CSS, I refer you to the SVG spec.

### CSS for VML elements

VML does not really support styling via CSS. There are some properties you can set, but these are typically things that are under jsPlumb's control and not something you should mess with.

The VML spec has a brief discussion of styling VML with CSS. jsPlumb creates a top level `shape` element in VML, inside of which it attaches whatever elements are required for the Endpoint or Connector in question. This `shape` element would be the thing that you would style via CSS, if it were possible. But here's a link to the discussion about which properties you can style via CSS. Note that all the paint type ones are all VML only.