Copy entire elements from one webpage to another?

There are times that I see one element on a WordPress page that I'd like to copy (maybe alter a little) and include on a WordPress page that I am working on.

I can use Firebug to select the element and I can see the many CSS statements (on many different pages) and I can see the HTML code as well.  I suppose that I could slog through all of this to eventually get CSS and HTML that I could use elsewhere, but it seems like there should be a better way to do this.

Is there a tool (or browser add-in) that I can use to select an element (like firebug) and that will copy out the needed code to replicate this in my webpage?

What would be awesome as hell would be a copy and paste for webpage elements that you could use to copy elements from another page into your CSS/HTML pages.

I know that the originating page may point to graphics on its own site.  These would need to be highlighted and changed to avoid problems should the originating site change these elements (or delete them), it's nice not to leech off other people's bandwidth by showing their graphics on your page without permission.

Anybody know of such a tool?
Who is Participating?
GaryConnect With a Mentor Commented:
Select the css dropdown, display style information, select the element and it will give you the css for the element including any inherited styles.
The html you can grab with firebug
Thats about the best you are going to get
Well firebug shows you all the css and html so all you need do is copy the computed css and html else check this out
JimHubbardAuthor Commented:
All scrapbook does is copy the webpage (or part of it) - something you can do just by saving a page normally in Firefox.

Scrapbook is not even as helpful as Firebug for the intended purpose of copying an element from one webpage to another.

It seems to me that it should not be such a large stretch to allow the saving of the HTML and related CSS into a text file from something like Firebug.  Even the "computed" CSS tab in Firebug does not allow you to copy all of the listed styles into a single CSS stylesheet (or even an inline style).  This makes no sense to me.

CSS should be the easiest thing to copy.  HTML components should be simple as well.  And, while Firebug does allow copying HTML, it is messy and unformatted.  Not great for editing.

The only real issue would be getting any associated javascript with the items.  But, I'd settle for just the formatting of an element at this point.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.