CSS Scraper

Prettifying makes inspecting the CSS easier.

This CSS scraper loads the HTML of your website and goes through all the <link> and <style> tags to (recursively) find CSS.

  1. Load the HTML for the URL you fill in
  2. Find all <link rel="stylesheet"> tags and load the CSS from the href URL
  3. Find all <style> tags and extract the CSS from it's contents
  4. Find all CSS @import statements in the CSS we just loaded and load the CSS from the @import's URL
  5. Go through all the DOM elements that have a non-empty style="…" attribute. Create a CSS Ruleset for each DOM node and add it to 1 single origin that contains all inline styles.
  6. Combine all the CSS

Once it's on the page here you can inspect each separate CSS origin in the Network Panel. From there you can see what we found and where it originated from. It also shows the media type in case of a <link> tag, as well as the rel="…". For all origins it shows the total filesize.

If you want to learn more about CSS scraping you can read it in our blog post 3 ways to scrape CSS from a website. Here we explain the possible angles and the pros and cons of each approach.