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.

---

Change Colour and Styles.

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.

• Elements should be already preselected in the tool bar - click on it if it is not.
• Click on Inspect icon (box/arrow) in top left of tools pane - it will turn blue - 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 showing the name of the element and styles defined for it.

• For full details, click on the element and the element name will show highlighted blue in the top part of the tools pane.

The element name will show as a class or id or, in this example, it has both

id="mw-header-container" class="ts-container"

• The styles defined for that element will show in the bottom part of the tools pane.

A class has a dot prefix e.g. (.classname) and an id has a hash prefix e.g. (#idname), in this case there is the style:

#mw-header-container {
   background-color: #facd7d !important;
}

• 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.