Tricks and Tips to Quickly Change Text, Update Color, Reorganize Structure, and More. is a language for creating web pages. HTML is a language that describes the style of an HTML page. CSS 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 (HTML) tab on the left panel and the (CSS) tab on the right panel. Elements Styles Change the HTML Let’s try changing the HTML of Google. We’re going to change the text from to Gmail 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 with and press enter. If you did it successfully, you should now see MediumMail where Gmail used to be. Gmail MediumMail 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 a shot! You can do it on 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. right click + inspect any Thanks for reading — and please follow me here for more interesting software engineering articles!
