How to Use Inspect Element to Edit HTML and CSS

Every modern web browser comes with a built-in suite of Developer Tools, and the most universally useful feature within them is the “Inspect Element” tool. It allows you to view and temporarily edit the HTML and CSS of any webpage live in your browser. This is an invaluable tool for web designers testing layout changes, or anyone curious about how a website is built.

Note: Any changes you make using the inspector are strictly temporary. They happen only locally in your browser’s memory and will disappear the moment you refresh the page. You cannot break a website or affect what other users see.

How to Open the Inspect Element Tool

The easiest way to open the tool is to right-click on any part of a webpage (like a headline, image, or button) and select Inspect or Inspect Element from the context menu. This opens the Developer Tools panel and automatically highlights the HTML code responsible for the item you clicked on.

You can also use keyboard shortcuts to open the panel:

• Windows/Linux: Press F12 or Ctrl + Shift + I.
• macOS: Press Cmd + Option + I.

How to Edit HTML

Once the panel is open, you will be looking at the Elements (or Inspector) tab, which displays the DOM tree (the structure of the HTML).

• Expand and Collapse: Click the small arrows next to HTML tags to expand them and see the content nested inside.
• Edit Text and Tags: Double-click on any text or HTML tag to edit it directly. You can change a headline’s text, modify image source links, or change classes. Press Enter to apply the change, and you will see the webpage update instantly.
• Delete Elements: Highlight a line of HTML and press the Delete key to remove that element entirely from the page layout.

How to Edit CSS Styles

To change how elements look, use the Styles panel, which is typically located on the right side of the Elements tab.

• Select the Element: First, ensure the HTML element you want to style is highlighted in the left panel.
• Modify Values: In the Styles pane, you will see all the CSS rules applied to that element. Click on any value (like a color hex code or a pixel size) to type in a new one. The page will immediately reflect your new style.
• Toggle Rules On and Off: Hover over a CSS rule, and a small checkbox will appear next to it. Uncheck the box to temporarily disable that specific style, helping you understand exactly what that line of code does.
• Add New Rules: Click in empty space inside any CSS selector block (between the curly braces {}) to type a brand new CSS property and value.
• Understand Overrides: If you see a CSS rule with a line struck through it, it means that style is being overridden by another, more specific rule elsewhere in the stylesheet.