Disable all css styles

How to Disable Website CSS Style (Chrome, Firefox, Edge, …)

CSS (Cascading Style Sheets) is a cornerstone of the internet. It is the part that gives websites their final visual representation in the browsers. As a client-side technique, CSS rules can be viewed, modified, and disabled right inside the visitor’s browser.

Developer tools and browser extensions are common tools to disable website CSS in Google Chrome and some known browsers. In addition to other methods, they can be used to test how a webpage looks without specific external, internal, and inline CSS, or with all implemented styles deactivated.

This article describes the most useful techniques to deactivate webpage styles for testing and other purposes. Knowing that the usability of each method depends on the targeted style type and used browser.

How to See and Extract CSS of a Website [Practical Guide]

Since CSS code can be implemented in websites in various formats, extracting website styles tends to be a difficult task. Inspecting the Page Source and using the Developer Tool is usually useful to see and extract the CSS style for the website.

1. Disable CSS Style Using Browser Extension (Chrome, Firefox)

The easiest way to disable website styles is by using a third-party extension. Web Developer is a browser add-on that adds various tools to complement the built-in functionalities.

We can use this extension to easily turn off/on all styles of a specific type with just one click. Web Developer extension is available on both Chrome and Firefox.

For security reasons, many users avoid using browser extensions and would rather prefer to use alternative solutions. For these reasons and to bring extended functionalities, we list in this article all available methods to disable CSS styles.

To use the Web Developer extension to disable website styles, follow these instructions:

1. Navigate to the extension location (Chrome – Firefox), install and activate it.
2. Open the webpage.
3. Click on the extension icon in your browser’s toolbar.
4. Select CSS tab.
5. Disable All CSS: click on Disable All Styles to turn off and on all style formats.
6. Disable External CSS: click on Disable Linked Style Sheets to turn off styles from external files.
7. Disable Internal CSS: click on Disable Embedded Styles to turn off styles inside tags.
8. Disable Inline CSS: click on Disable Inline Styles to turn off element-based styles.
9. Upon clicking any option, the webpage will update automatically to show without the disabled style.

Besides the three existing style types, this extension allows us to disable/enable further styling options. Such as browser default styles that browsers initially implement before being overridden by the website-defined styles. As well as print styles that structure how the webpage will be printed.

2. Disable CSS Using Developer Tool (All Browsers)

Most browsers have a built-in tool to inspect the website source code and monitor its performance. We can leverage it to manually access and disable all types of CSS styles .

Here are the steps required to disable all website styles in Chrome, Firefox, Edge, and some other browsers:

1. Open the webpage.
2. Right-click anywhere inside the webpage.
3. Choose Inspect , Inspect Element , or other similar options. If not found, click on another area.
4. The Developer Tool will open. If this doesn’t work, search for how to open the developer tool in your browser. The tool has multiple tabs, make sure the first one Elements (or Inspector ) is active.
5. This tab has two panels, look inside the left one where the HTML structure is listed.
6. Try to locate and sections. Click on the small arrow next to each one to fold/unfold it for a cleaner space.
7. Disable External CSS: unfold section and look inside it for elements (or press CTRL+F to open the search box inside the developer tool, then type stylesheet ). Delete these elements by pressing Delete key or right-click on the element then Delete element/node .

————————————————————————————
Disable Internal CSS: unfold (and ) sections and look inside them for

elements (or press CTRL+F to open the search box inside the developer tool, then type