How to export all relevant HTML/CSS for one element

Yes, there is a tool/s and ways to do that.

First, with Chrome extension, you can install SnappySnippet from Chrome Web Store. It allows easy HTML+CSS extraction from the specified (last inspected) DOM node. Additionally, you can send your code straight to CodePen or JSFiddle.

Second, CSS Used, other Chrome extension, for extracting CSS with children CSSs.

And third, without extension, if you want CSS embedded in HTML or above extensions is not working for you, you can use any Webkit based browser (like Chrome or Firefox) to run script in console which will add all css to html element and you can easily just copy OuterHTML and it will work anywhere.

var el = document.querySelector(“#yourId”); // change yourId to id of your element, or you can write “body” and it will convert all document
var els = el.getElementsByTagName("*");

for(var i = -1, l = els.length; ++i < l;){
    els[i].setAttribute("style", window.getComputedStyle(els[i]).cssText);
}

So, just copy this code to Console (Right click on page->Inspect->Console), change yourid to yourid or set it to "body", run it and then right click on your element and "copy outerHTML"

Do you mean something like Firebug ( Firefox addon )? Or the Debug bar in Chrome ( Press F12 in the browser )?

In Chrome:

• Press F12
• Click on the loop in the bottom left.
• Click on the element
• Now you can see all the style.
• In the big window you can see other element, and the element under it.