Chrome Inspector – Hack Websites and Customize CSS

by | Oct 12, 2017 | Social Media, Web Design

Chrome Inspector – Hack Websites and Customize CSS

[amazon_link asins=’B06XCM9LJ4,B01DFKC2SO,B015TJD0Y4,B0749WVS7J,B06XXM5BPP,B0178IC734,B01J24C0TI,B073SQYXTW,B01BH83OOM’ template=’ProductCarousel’ store=’system22-20′ marketplace=’US’ link_id=’aaf4c7ae-e75e-11e7-9b5a-d977c9e8de4e’]




Chrome Inspector – Hack Websites and Customize CSS . Google chrome’s in built inspector is a fantastic tool. When you are looking at a website in Chrome just hit the F12 key, or right click and hit inspect and it will bring up the inspector panel. This may look a little frightening at first, but it is full of useful information. The panel on the left hand side usually the largest panel shows us the HTML of the site that we are viewing. HTML stands for hypertext markup language, and is the framework of the website that makes up the basic structure and content. By default the left-hand panel usually shows the CSS. CSS stands for cascading style sheets and contains the code that is needed to style the HTML the desired way, such as applying colors font sizes spacing etc.

If you right click on the HTML area, a drop-down menu will give you the option to edit as HTML. This means that we can rewrite the HTML code, or insert our own text in place of the existing text. The changes will appear on the website panel above in real time. As shown in the video, you can change a news headline or a paragraph of text. In the right-hand panel you can do the same thing with the CSS. Of course you have to know some CSS code. This will enable you to change the background colors or font sizes, and the positioning of certain elements. This can be great fun, you can manipulate the CNN news page to say that you have won the lottery, or that aliens have landed in your neighborhood, take a screenshot and share some fake news with friends or to your social media for fun. As soon as you refresh the webpage by hitting F5 key on your keyboard, or the refresh icon in the address bar, then the website will revert back to the way it was originally. Edits done this way are non-destructive, so only you can see them and they have no permanent effect on the site.

You may ask yourself; well, what is the point of this? Apart from the fun and the experimental aspect of it. It can be a really powerful tool when you are building your websites. I build a lot of websites mainly using bootstrap and the WordPress platform. And I use the Chrome inspector all the time to test out CSS ideas that will make my website looks the way I want it to. I usually start entering CSS code after I have built the HTML structure when building with bootstrap, and manipulate it until I have the desired effect on the site. Once I have achieved this, I will copy the CSS I have entered, and add it to my custom style sheet. When building with WordPress, it enables me to do the same thing to customize the WordPress theme to my own needs. Of course with WordPress, I create a child theme when using custom CSS, to prevent theme updates from over writing my new CSS.

So if you are interested in building websites or you are an existing developer / builder that does not use this tool. Download Chrome and check it out, it’s a lot of fun and can yield some great effects and greatly speed up your web development workflow.

chrome inspector

Subscribe To Our YouTube Channel

4.5 million views on youtube

Learn Bootstrap

Bootstrap (no coding) Build Bootstrap Websites the Easy Way! rating

Test Out The Divi Theme

IT Certification Category (English)300x250

Elementor Page Builder

Pin It on Pinterest

Share This