# Google Chrome DevTool: Web Comics #1 CSS-Overview

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055335468/3c995960-a1ca-4658-80f5-8327cf0dae44.png align="left")

If you don’t have time to read but want to know the core of this post. Find the quick read and comics 👇

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055337196/f0254f3d-7ab8-4ba6-ac41-efc241fb53ea.gif align="left")

A quick read about CSS Overview

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055339757/2aa93e63-a0b7-4261-b84c-5eeb68142c46.png align="left")

Let’s see how to enable the **CSS-Overview** option in Chrome now

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055342180/e4c0581b-721b-42a2-b484-1e7391e0d692.gif align="left")

1. Open Developer tools (`Command`+`Option`+`I` on Mac; `Control`+`Shift`+`I` on Windows, Linux;)
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055343978/f37a511b-2fb6-4d13-902c-49dbdcf15aa1.gif align="left")

2\. Go to DevTool **settings** like below

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055345749/3aa6ccb8-8fe2-4169-a8ee-2b5f0768b61a.png align="left")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055347165/b1f8dce1-a494-438a-a7ac-739c231a3834.gif align="left")

3\. On the Left-hand side click **Experiments**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055349080/9f2c01f2-690e-49ac-802a-a577f1a6a608.png align="left")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055350954/0b845d9b-f4f8-435e-abbc-769b5cbb5559.gif align="left")

4\. Enable **CSS Overview** and then close settings. Now reload the Devtools

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055352845/ede26363-5b62-4492-b731-8f6befcf8aae.png align="left")

5.Now Click on the **CSS Overview** tab and you could see the magic now

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055354550/5516e88e-c6c7-448e-a347-671747229c33.png align="left")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055356065/69729f35-70c6-4ed6-9ac8-a9f30a02386a.gif align="left")

You can see the Colors used in the Webpage and even you can click a color to see where it is implemented in the HTML part like below

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055357975/04345048-bcb6-4bc2-af42-7065644b8ebc.png align="left")

Even you can go further by clicking the element like below to see the implementation

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055359695/2cfe9245-55d0-44bc-b421-f2360a90464d.png align="left")

Similarly, you can see the fonts used in the Webpage like below

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055362023/1681b5b0-77d1-4246-be32-5fd9131077aa.png align="left")

You can also view the unused declarations as well as the Media Queries that are used

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055364760/99b3bbf3-0f7b-4d8f-a1c3-6484da3fe9ea.png align="left")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055366288/873b61bd-7d1b-4900-87bf-fc774401eef5.gif align="left")

The entire report is broken into different segments like **Colors**, **Font info**, **Unused declarations**, and **Media queries** with a single click.

It helps the front-enders and designers to get the information in no time

<iframe src="https://www.youtube.com/embed/RMIHIBQPJQk" width="700" height="393"></iframe>

### Congratulations 🏆

You have learned about CSS Overview and how to use it.

Catch you up in a new post till then **Happy Learning!**