{"id":30006,"date":"2017-05-17T20:01:28","date_gmt":"2017-05-17T12:01:28","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=30006"},"modified":"2018-04-09T16:52:54","modified_gmt":"2018-04-09T08:52:54","slug":"css-stylesheet-with-css-stats","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-stylesheet-with-css-stats\/","title":{"rendered":"Visualize Any CSS Stylesheet with CSS Stats"},"content":{"rendered":"

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

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

Recommended Reading:<\/strong> Ten Living Style Guide Tools for Web Designers \u2013 Best of<\/a><\/p>\n

\"hongkiat<\/a><\/figure>\n

This app covers so much that it\u2019s practically impossible to consume everything in one sitting. It will give you a tremendous overview of any website just by showcasing what\u2019s in their stylesheet<\/strong>.<\/p>\n

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

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

But the more you use this app the more fun it gets! Here\u2019s a list of everything<\/strong> you\u2019ll find on the stats page:<\/p>\n