About CSS Overview Tool

You get various panes related to the page’s CSS code which are Overview summary, Colors, Font info, Unused declarations, Media queries, and Non-simple selectors. On the top-right corner, you get a clear button to clear all information displayed to be captured again.

• Overview summary: Here you get the count of elements, external stylesheets, inline style elements, style rules, media queries, etc.
• Colors: You get a list of colors in hexacode for background color, text color, fill color, etc. If you click any color you get the list of all the elements using the color.
• Font info: You get a list of various font information such as font family, weight, size, etc. You can also see the number of occurrences that can be clicked to view all elements using the font.
• Unused declarations: Some CSS declarations that are useless and can be removed are displayed here. You also get the number of occurrences of the declarations which when clicked will open a pane displaying various elements using that declaration.
• Media queries: All the media queries of the webpage are displayed in the section. You also get the number of occurrences of the media queries which when clicked will open a pane displaying various elements using that media query.
• Non-simple selectors: In the CSS code of the webpage all those selectors that are using pseudo-class and pseudo-elements and other not simple selectors are listed in this section.

The CSS Overview Tool is used to get a basic summary of all the CSS code used in a webpage. It provides a thorough analysis of several elements, including fonts, colors, media queries, and unnecessary CSS declarations. The information can be used to improve the looks and loading time of the webpage. You also get the list of elements using a particular property by clicking the property listed.