Changing CSS inside the inspector

On the right-hand side of the inspector, you will see all your styles for whatever element you have highlighted in the DOM. You can even click on any of those properties or values and change them. So if you click on 26px, next to font-size, you can increase it to whatever you want. This is updated immediately in the browser, which is very cool:

You can even uncheck certain properties and see that change immediately. So, as you can see in the next screenshot, if you click on the h2 element in the DOM and then uncheck color and margin bottom on the right-hand side, this change to the h2 element takes immediate effect. Simply recheck them to add them back:

If you click on the last element—in this case, margin-bottom and hit Tab, it will allow you to type in a new property and value. So add margin-left of -40px and see what it looks like; this moves this h2 over 40px to the left:

Now these aren't permanent changes. As soon as the browser is refreshed, these styles will disappear; however, you can copy this rule set and paste it into your code if you want to keep these changes we're experimenting with. It even tells us where this rule set is currently located in the style sheet-line 86. If you hover your mouse over that, it will tell you exactly where that file is in your website's folder: