Archived and Closed
This conversation is no longer open for comments or replies and is no longer visible to community members. The community moderator provided the following reason for archiving: Archived
To enable it just use CTRL+SHIFT+I (on MAC -> COMMAND+SHIFT+I) or right click and from the pop-up menu select Inspect Element :
Once you have clicked on that option you will see two windows for HTML code and for the corresponding CSS rules that apply to each html element.
(Click to view larger)
As we can see in the image above we can find out a lot of information about the element or page:
1.) On the left part is the windows which shows the HTML code: here you can easily identify what tags where used and what are the surrounding elements
2.) Hovering with the mouse pointer over the highlighted element in HTML windows will show on the main page the tag used and width and height
3.) The right windows is for all the CSS styels used for that particulat element
4.) On the far right in the CSS window you will see a text like style.css:462 - this means that the CSS rule can be found in styles.css file and on line 462
Another interesting usage of this tool is that you can make live changes and see how they would fit into the overall design without even modifying the actual code from the templates.
Do not worry if you delete some elements or styling in this editor. This happens only in the browser and you can see again the site as it is by doing a refresh (F5).
To edit a particular part of an element in the HTML window simply double click it and change the text or tag in it. You can delete entire blocks of code in this HTML window by right-clicking and selecting Delete Node. This will help troubleshooting some issues related to modifications done to the layout. If you do not like what you see, simply refresh the page.
If you want to see how the site will look with a changed text color for the top menu, simply hover with the mouse over an item, click Inspect Element, and then look the CSS rules window. The color of text can be changed by modifying the value for attribute COLOR.
After testing a few times how this tool works you will be able to find out what and where to change without having to ask around.
Chrome's Inspect Tools has many other options that you can use it for, but explaining their usage is not the scope of this tutorial. Please check further documentation about it here. Also, please check documentation on W3Schools about HTML and about CSS.
There are no replies.