Table of Contents
Browser Based CSS Debugging
If you go to your browser and open the “Inspect” portion, by right clicking mouse on the browser, you will land up on a section shown below. Here under “Elements” tab, you will find both of your HTML and CSS codes.
Just use this button to hover and select any element on UI for which you want to see/modify CSS.
In our case, we will be modifying our sub header. Thus, we will select “The God of Cricket” using the above-mentioned button. Once, we click it, we will get given screen:
What we found that whatever CSS code we wrote for <h2> tag is getting reflected here. Now, you can just add code directly here. These codes will be applicable only for current instance of webpage and gets restored to the old code, once refreshed. So, once you have got what you wanted in terms of style, you need to paste the same code in our CSS code file.
Here, we have just changed the colour and font-style to italic for H2 tag and the same is reflected in the output screen: