How we easily check/edit CSS Attributes/Structure of a Web Site!

Interface in Firefox Browser

Select the are and click inspect element

Use your Browser.

Almost every  browser provide this feature.Still if you need more advanced features you can use an Extension like Firebug. All you need to do is selecting the area you want to check and right click and select inspect element from the menu you get! you may come with following interfaces like follows!

Interface in Chrome.

Use this to Web Development 

There you can check the site style settings and structure when you go through the codes!.This tool comes handy when you are a developer and you need to edit and style your site you can check your site from here and you can apply your codes here or change the values on CSS attributes and check how will it affect your site.without editing your source and after check the appropriate settings you can add the code/changed values to the original source!

Use it in learning purpose 

And this also comes handy when you want to study the structure of a other site and see what are the setting or attributes they have used to style their pages.Why not use this and learn some CSS  tags! :)

Some Extra Info!

Also here i should mention this. if you are maintaining a site or if you are a developer of your own site lets say,in your original code you have used some external style sheets or links for Java Script functions or Google APIs (Ex::In your blogger theme you may have used Bootstrap in your site),In this browser window it will show you the basic structure and you can change attributes and check but you may not find the place in you code that's because the particular part and CSS  setting is externally linked to your site.So in this case you may do custom styling by putting style tags in your site script or doing CSS injection or pass parameters to the JavaScript function this will depend on the source you use.