Inspect HTML element and add your own CSS styles

[arbei]

In your Chrome browser, right click the HTML element you want to check and select Inspect, see the following for detail:

• Open the Elements panel to inspect the DOM or CSS
• View and change CSS

Find and test the CSS styles you want to change in “Styles” panel of the browser first.To override the CSS styles, you may add your styles under the HTML → Styles → User tab (or use server events if applicable) in PHPMaker.

[arbei]

Note also that modern Chrome includes built-in AI assistance directly linked to the live DOM tree.

How to Use "Debug with AI" on DOM Elements

1. Open DevTools: Press F12 (or Cmd + Option + I on macOS).

2. Inspect the Target: Open the Elements panel, use the element picker, and select the problematic node.

3. Trigger AI Assistance: Right-click the element in the tree, select "Debug with AI" -> "Start a chat", or you may click the ⋮ icon and select Debug with AI.
   

   

4. Ask AI: Ask any questions about the element, e.g.

   • "Why is this element overflowing its parent container on mobile viewports?"
   • "Why isn't this element centering despite margin: 0 auto being applied?"
   • "Which CSS rule is overriding background-color here, and how do I fix it cleanly?"
   • "Why is this button invisible or unclickable despite having opacity: 1?"

AI can also suggest solution and change relavant CSS to test.