If you're using Firefox as your web browser, you can download and install the free Firebug plug-in which allows you to quickly and easily view a webpage's source code. (For a quick tutorial on reading source code, check out this tutorial: Reading the Source Code of a Webpage.)
If you don't already have Firebug installed, you can download it from the Firebug website.
Now you can go to a page and view its source code by either clicking the small Firebug icon in the lower right corner of the browser window or by choosing Tools > Firebug > Open Firebug in the browser's menu bar:
This opens a window in the bottom third of the browser window that shows the source code of the HTML file with its sections collapsed, as well as the file's associated style sheet on the right:
As you expand the different sections of the HTML code, the elements associated with the selected code will be highlighted at the same time in the browser window. You can also click the mouse pointer icon (see arrow in the following example) and then click on an element in the webpage to select its code in the Firebug window. In this example, clicking the title "We'll Make Your Album A Success" shows a <span> tag associated with the title:
In this example, an image on the webpage has been selected and the HTML code that corresponds with it has been highlighted in the Firebug window:
So you can see that using Firebug or other debugging tools to view the source code has a huge advantage over viewing the source code with other methods. You can view both the HTML and the associated CSS file, collapse irrelevant sections of the code, and highlight elements on the page in real time as you browse the code.
