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
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.
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.
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.
This will automatically highlight the element in the HTML. From here we will replace the word
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.
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
If you did it successfully, you should now see MediumMail in red color.
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.
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!