Visualize Any CSS Stylesheet with CSS Stats

By . in Toolkit. Updated on .

Ever wondered how many CSS rules are in a stylesheet? Or have you ever wanted to see a visual representation of all the colors used in one CSS file? With CSS Stats, you can plug in any website and pull a bunch of raw CSS data to satisfy your curiosity.

And this web app goes so much deeper than just showing all the colors for a stylesheet. You can visualize all z-index values, all font sizes, all media queries and even see a visual specificity graph.

Recommended Reading: Ten Living Style Guide Tools for Web Designers – Best of

hongkiat css stats

This app covers so much that it’s practically impossible to consume everything in one sitting. It will give you a tremendous overview of any website just by showcasing what’s in their stylesheet.

To get started, visit the CSS Stats website and plug in any URL you wish. You could also pick from a number of suggested sites such as Facebook, Apple, and Pinterest (among others).

On the results page, you’ll see the total CSS file size in kilobytes, along with a list of the most commonly used properties & declarations. This all appears as one long list of numbers so it can be confusing to read at first.

But the more you use this app the more fun it gets! Here’s a list of everything you’ll find on the stats page:

  • Total # of properties, selectors, and rules
  • All font colors with examples & hex codes
  • All background colors with examples & hex codes
  • All font sizes with examples
  • List of font families
  • List of all z-index values
  • A bar chart of total/unique CSS declarations
  • Specificity graph
  • Total ruleset size
  • All media queries
  • The raw CSS code along with URL links to the individual CSS files

CSS Stats is smart enough to pull all CSS files and merge that data together. The developers put a lot of effort into this thing to get it working just right.

And, the extra awesome part is the full GitHub repo with source code for the entire project. So, you can download this and re-host it on your own server (locally or otherwise) to play around if you wanna dig into the code.

mozilla specificity css graphs

You have the option of pulling any individual CSS file or parsing all the stylesheets on a single domain. There’s so much you can learn from studying this tool and it offers deeper insight for developers who get down into the nitty-gritty details.

To test for yourself, just visit CSS Stats and plug in a website. You’ll be amazed how much data is available and how much you can learn from such a simplistic tool.

Recommended Reading: 15 Useful CSS Tricks You Might Have Overlooked

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail