How to find CSS element

So I was checking Contributions made by everyone out here in Utopian and found out that @deveerei called developers to fix some issues "Calling on Developers for this task". Its great that Utopian is growing so fast that when you call for task assignment anyone who is not working on anything can grab that task and start working.

In one of the line of @deveerei post he said that

I only know basic CSS and HTML which gives me the trouble of finding the proper places in the Github Repository to edit to show those changes on the colors in the game.

So my tutorial is for @deveerei as well as everyone who wants to know how to find details if you want to change anything.

@deveerie was kind enough to provide us the test site, so just head over that site, you can see a very nice colourful website.

The task which he has asked is to change Red and Blue into Teal and Midnight Blue. So lets find out what are the classes in CSS we need to change. When you are in the page just hit F12 or right click and do Inspect Element you will see a window like below.

Next is to find out the exact element. For that go to the left hand corner where you will see something like below

Click on that and click on any element on the web page to find out that element. Once you do that you can see all the classes attached to that element, now just go to the right hand side of the Inspect Element window you will see a list of classes and all the details about that.

Now as you can see in the below GIF, I have actually found out the element and then tried to change its colors. Now you have to find out that exact class in your css files and then change it.

The CSS files which can be updated is https://github.com/deveerei/OhSteem/blob/master/css/style.css.

I am not going to show you more as there are developers working on it. But just that I wanted to write this for @deveerie so that if there is any urgent work he can actually look into it.