Why can’t I type directly into the HTML with FF Dev Tools? [on hold]

Hopefully this question isn't too oddly specific. Let me know if it belongs on ProWebmasters instead...

I'm making some mock-ups in Photoshop, using screen shots from the site in its present state as a starting point.

I want to be able to change certain parts of the HTML/CSS before taking the screen shots. For example, the text tracking in this case. Reason being that if I add new text in Photoshop it will not rasterize quite the same way as the browser rendered it and it will look out of place.

I use Firefox as my primary browser, but there is something frustrating about Firefox's Developer Tools: it seems to limit the ways that a page's markup can be changed. I can't simply double-click and begin typing to add an inline style inside a tag wherever I want to - it will allow me to type but the changes won't stick.

For contrast, here is the desired behavior, working in Chrome's Developer Tools (the changes are reflected in the page):

Is there a way to add new inline styles using Firefox's Developer Tools that I'm just not aware of? I've been searching all over but to no avail. Thanks in advance for any help.

Update

After adding CSS here, the style is affecting every instance of <span>

What could be making it not behave as an inline style?