How to copy HTML with CSS

Posted: November 27, 2013 in Javascript/CSS

We have one website designed and implemented by a third party using some CMS system and we want to use its header and footer in our other site.

My first approach is to copy the html via view page source and remotely include the page CSS. The problem is that I need spend time to fix those CSS conflicts with the existing css.

I found this great free Chrome extension SnappySnippet in Chrome web store.

Just right click the html element you want to copy and select Inspect Element, make sure you are inspecting the correct element, click the SnappySnippet tab and click “Create a snippet from inspected element”.

It will generate the HTML and CSS with new element ID, such as DIV_1, DIV_2 … , so that it won’t conflict with the existing css.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s