Find solution
How to save ONLY the CSS changes of Styles panel of Chrome Developer Tools?

What are the best tools to dissect a website and be able to replicate it? Specially the CSS aspect (besides the Chrome Developer thing).

  • Answer:

    Honestly, in-browser developer tools and plug-ins like https://addons.mozilla.org/en-US/firefox/addon/web-developer/ or https://addons.mozilla.org/en-US/firefox/addon/cssviewer/ are the best way to dissect a web site's CSS. I also enjoy Stylizer: http://www.skybound.ca/. I also found this, which seems very useful, although a little outdated: http://www.klauskomenda.com/archives/2008/02/16/collection-of-web-developer-tools-per-browser/ But, unless you understand how that CSS works with the rest of the website, including any JavaScript, dissecting maybe be next to useless. Although, dissecting can help you along your process of understanding how everything works. Personally, I would download the entire website, code and all, and bring it into your favorite code editor and dissect it from there, so you can see for yourself more easily how everything is working together. But it is always better to really have a deep understanding of how something is working, rather than just copying piecemeal, because then, if something isn't working how you intended, you can fix it yourself instead of trying to rely on yet another website's code to get what you are after. I hope this helps! :) Thanks for asking me to answer!

Tricia Smith at Quora Visit the source

Was this solution helpful to you?

Other answers

Unless you know what you are doing, trying to imitate style of some website requires you to have knowledge of HTML and CSS. If you just want to copy the CSS of a website, you can just save the website by going to the File menu in your web browser and saving it in your computer. All the required resources like CSS, images, HTML content and JavaScript files that are currently loaded by the site will be saved. Then you can edit those files as per your needs. (Not recommended) But if you want to learn about how a website is built, you need to learn the layout used by the website, which is provided by HTML. CSS on its own (without HTML) is completely useless. You could get some inspiration from the CSS files used by the website, thanks to the web for being an open platform. There are other things to consider as well, one of them being JavaScript. JavaScript provides logic to web applications. For example, it can be used to make the web application interactive to the user. The flavor of JavaScript used by web browsers can totally interface with HTML and CSS. This feature of JavaScript lets you manipulate the browser's DOM and make modifications to elements on the fly. Websites like Quora and Facebook heavily use JavaScript to do myriad of things. But HTML, CSS and JavaScript only work on the browser, the websites backend logic might be implemented in a language like Ruby, PHP, Python etc. The backend code of a website is not visible to the site visitors, so even if you want to replicate a site you can only get its HTML, CSS and JavaScript.

Gopal Adhikari

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.