Chrome How to View CSS Properties

A step by step View CSS Properties tutorial.

1. Use CSS Inspector

An easy way to inspect the CSS of any element with only hover over, and copy its entire CSS with one click.

⚡️CSS Inspector is an easy and fast way to inspect/edit live webpages without coding. It's simple, just click & copy

Features:

🔎 Get CSS Properties simply by selecting an element

🎨 Get the color palette from any website

🖍 Get a color reading from any point in your browser, elements or images, and paste it

📏 Get distance between elements in the page

🅰 Inspect fonts, color and other font properties. All typographies in one place

Follow the following steps to use this extension:

Step 1: Install it

First and foremost visit this extension's page while browsing with Google chrome. Then click Install to install the extension.

Step 2: Use it

Use the extension as shown in the screenshots below:

Reference

Below are the reference links:

2. Use CSS Viewer for Google Chrome™

Quick and simple CSS property viewer.

Want to view the CSS for a button/certain HTML element on the web page?

You can do so quickly today once you install this extension.

This CSS Viewer allows you to click on any button/image/text etc on a web page and you can instantly see the CSS code which was used.

Its a quick and easy way to sort out the CSS code for a specific element on a website. Try using this CSS Viewer today to check out the CSS code being
implemented on a website today.

Follow the following steps to use this extension:

Step 1: Install it

Okay visit this extension's page while browsing with Google chrome. Then click Install to install the extension.

Step 2: Use it

Use the extension as shown in the screenshots below:

Reference

Below are the reference links:

3. Use CSS Spy

Showing CSS attribute on element hover.

Inspect computed styles of any single element just on the fly. When the extension is active, hovering element will shows the width, height and selector name of the element. Clicking on the element will bring popup which show the common computed styles of the element, so you could just copy it right away. Comparing CSS properties of 2 elements will also never been this easier with this extension.

Features:

1. Showing width and height when hovering on an element
2. Showing computed style when clicking on an element
3. Comparing CSS properties of 2 element (even work with elements from different page/URL)
4. Clean design (yeah, that's exactly what we need)

Follow the following steps to use this extension:

Step 1: Install it

To begin visit this extension's page while browsing with Google chrome. Then click Install to install the extension.

Step 2: Use it

Use the extension as shown in the screenshots below:

Reference

Below are the reference links:

4. Use CSSViewer

A simple CSS property viewer.

How to use :
To enable CSSViewer, simply click the toolbar icon and then hover any element on you want to inspect in current page.

Open source inside:
Source code can be found on GitHub at https://github.com/miled/cssviewer

Privacy :
In order to work properly, CSSViewer requires the permission to access to your history and website data. However, CSSViewer do not collect nor will ever transmit any of your private data.

Follow the following steps to use this extension:

Step 1: Install it

First and foremost visit this extension's page while browsing with Google chrome. Then click Install to install the extension.

Step 2: Use it

Use the extension as shown in the screenshots below:

Reference

Below are the reference links: