Administration Adware Spyware Apache Bluetooth DOS Commands Edge General Internet Connection Internet Explorer Media Center Media Player Mozilla Firefox MS Access Performance PHP Programming Security Silverlight Tips Tools Tutorials Windows 10 Windows 7 Windows 8 Windows Phone Windows Server 2008 Windows Server 2012 Windows Server 2016 Windows Vista Windows XP

Edge Developer Tools - View CSS Style Properties

Q

How to view CSS style properties that applied to an HTML element with Edge Developer Tools?

✍: FYIcenter.com

A

When an HTML element is processed by the Edge browser, it will be displayed to the screen according its CSS style properties given by custom CSS files or browser's default CSS settings.

If an HTML element is not display properly in Edge browser, you can use Developer Tools to locate the HTML element and review its CSS properties.

1. Run Edge and go to https://bing.com.

2. Press F12 key or click "... > Developer Tools". You see the Developer Tools screen displayed.

3. Click "Elements" tab. You see the page source code displayed as an HTML element tree.

4. Enter "bing" in the search box to search for the following HTML element: 

<h1 class="a11yhide">Bing</h1>

5. Click on the element. You see its CSS style properties displayed in the next panel on the right.

Edge Developer Tools - View CSS Style Properties

 

⇒ Edge Developer Tools - Modify CSS Style Properties

⇐ Edge Developer Tools - View HTML Elements

⇑ Edge Developer Tools

⇑⇑ Edge Web Browser Tutorials

2019-08-08, 668👍, 0💬

Administration Adware Spyware Apache Bluetooth DOS Commands Edge General Internet Connection Internet Explorer Media Center Media Player Mozilla Firefox MS Access Performance PHP Programming Security Silverlight Tips Tools Tutorials Windows 10 Windows 7 Windows 8 Windows Phone Windows Server 2008 Windows Server 2012 Windows Server 2016 Windows Vista Windows XP