Check out this helpful discussion on managing saved ranges. While it doesn't provide a direct guide on adding CSS, it does offer guidance on how to wrap your range, which you can then enhance with a .css() function.
var range = window.getSelection().getRangeAt(0);
var newNode = document.createElement("span");
range.surroundContents(newNode);
After wrapping the range, you can apply CSS to the span element.
UPDATE:
If you want to apply CSS to the selected range, you can follow these steps. View this demonstration on jsfiddle for a working example.
You can set the CSS style directly on the span node using JavaScript:
// Obtain the selection range
var range = window.getSelection().getRangeAt(0);
// create a new DOM node and set its style property to red
var newNode = document.createElement('span');
newNode.style.color = "red";
// wrap the selection with the new span tag
range.surroundContents(newNode);
Alternatively, wrap the range with a span tag and use jQuery to apply styles more conveniently with the .css() method.
// capture the selection
var range = window.getSelection().getRangeAt(0);
// create a new span node with the id 'testing'
var newNode = document.createElement('span');
newNode.id = "testing";
// enclose the selection range with the <span id="testing"></span> node
range.surroundContents(newNode);
// select the new node with jquery and utilize the jQuery .css() method to set styles
$("#testing").css("color", "green");
While the hardcoded ID in the second example is not ideal for reusability, it demonstrates the concept for customization based on your specific requirements.