Chrome

<historylink type="back">🠈 Back</historylink> 🠉 Must Have Tools

---

Chrome is free to download and use at the following link:

https://www.google.co.uk/chrome/

Use the software as an internet browser but it also has many useful tools for web development.

Try it out on this page for example.

• Right click page - click on Inspect at the bottom of the popup menu - or just Control+Shift+I on your keyboard - the developer tools pane opens on the right of the screen.

• Click on Inspect icon (box/arrow) in top left of tools pane - or just Control+Shift+C on your keyboard.
• Hover the cursor over the extreme top left corner of this screen and you will see the following popup.

• Click on the element and all the style details will show in the the tools pane.
• In the top half of the pane the element name will show as a class, with a dot prefix e.g. (.classname) or as an id, with a hash prefix e.g. (#idname).
• Use this name to define a css style in the user.css file that will override the styles in the core files of Phoenix.
• In this example, to change the colour of the element the following would be saved in the user.css file.

• Click the colour square and a colour picker and colour changer will popup.