Tricks and Tips to Quickly Change Text, Update Color, Reorganize Structure, and More.
- HTML is a language for creating web pages.
- CSS is a language that describes the style of an HTML page.
In this article, I will demonstrate how to hack or quickly change HTML and CSS with any browser on any website. This is a useful skill to have for Frontend Developers and any one who is interested in learning more about what’s under the hood of websites.
For our purposes, I will only use Google Chrome, but you can also use it on any browser e.g. (Mozilla, Safari, IE, etc).
Getting Started: Right Click and Inspect
Right Click. Inspect.
This reveals the contents under the hood of a website so to speak, similar to a mechanic looking under the hood of a car. It might look intimidating if you’ve never seen it before, but don’t worry! It’s not as scary as it seems. There’s a pattern to it.
Google Chrome’s Inspect Panel
We will only focus on the Elements (HTML) tab on the left panel and the Styles (CSS) tab on the right panel.
Change the HTML
Let’s try changing the HTML of Google.
We’re going to change the text from Gmail to MediumMail.
Click the mouse icon in the upper left corner and then click Gmail
To do so, click the mouse icon on the upper left corner of the inspect panel. This selects an element in the page to inspect it. Click Gmail.
Replace Gmail with MediumMail in the HTML
This will automatically highlight the element in the HTML. From here we will replace the word Gmail with MediumMail and press enter. If you did it successfully, you should now see MediumMail where Gmail used to be.
Great! Now that we’re done hacking the HTML, let’s hack the CSS.
Change the CSS
To change the CSS of a website is similar to changing the HTML.
Let’s change the text color of MediumMail to Red.
Changing the color text of MediumMail to red in CSS
Similar to the steps above, click the mouse icon on the upper left corner of the inspect panel. Then click MediumMail. In the right panel under the styles tab, enter color:red.
If you did it successfully, you should now see MediumMail in red color.
Conclusion
Knowing how to temporarily change the HTML and CSS of any website with any browser is a good skill to have. This can be used to quickly test changes to your webpage before actually coding it out.
Try giving right click + inspect a shot! You can do it on any website, including this one! As a simple test, try changing the words and color on this page. If you have another way of doing this or you have any problems with examples above, just drop a comment below to let me know.
Thanks for reading — and please follow me here for more interesting software engineering articles!