When you take an existing product (including websites) and try to determine how it was created, you are doing what is called reverse engineering. There are several tools at your disposal that may help you discover how a particular website was created in terms of XHTML and CSS code.
View Source
Each web browser allows you to view the source code of the site. This is the crudest technique for determining how a page was built. In Firefox, if you click the “View” menu at the top of the browser, you will see a “Page Source” option. This allows you to view the HTML code of any website.
Firefox menu with option to "view source"
To view the corresponding CSS code, find the <link> or <style> tags in the XHTML code. If the XHTML is loading an external CSS file, enter the URL of that file (found in the “href” attribute of the <link> tag) directly in the browser address bar.
View Selection Source
If you select any text on the page, and then right-click (i.e., control-click on Mac), you will see the “View Selection Source Option. This allows you to view the HTML code for only the elements on the pag that you selected.
Firefox context menu, showing "View Selection Source"
Outline Current Element (using Web Developer Add-on)
With Firefox’s Web Developer Add-on, you can mouse over any element on the page to put a temporary red border around that element, as well as see the CSS selector that applies to the element. To use this, click on the “Outline” button in the Web Developer toolbar, and select “Current Element”. This can be useful for determining the approximate size and position of an element that seems to be behaving differently than you expect – the red border will show you its true outline.
Web developer toolbar's "Outline Current Element"
This tool will also show you, directly underneath the toolbar buttons, how the currently selected element fits into the hierarchy of elements on the page. This information is shown in a CSS selector-style format, although it is meant for your information on hierarchical structure only, and is usually not how the actual CSS selectors for this element actually appear in the code.
The position of the current element in the document's hierarchy
View Element Information (using Web Developer Add-on)
The Web Developer Firefox Add-on allows you to view the complete information of any element on the page. To use it, click the “Information” button on the Web Developer toolbar, and then select “Display Element Information”.
Web developer toolbar's "Display Element Information"
This tool allows you to view any CSS settings or id and class XHTML attributes, as well as other information about parent and child elements. Once you have selected “Display Element Information” from the toolbar, click on any element on the page to get that element’s information. The selected element will show a red border around it:
Element information about the "history" tab on Wikipedia
Viewing and Editing Source Temporarily (using the Firebug Add-on)
The Firebug Firefox Add-on allows you to not only view XHTML and CSS source, but also edit it to make quick changes and see immediately how they affect the page. To activate the Firebug Add-on you need to click the firefly icon at the bottom-right corner of your browser window.
Click the grey firefly to activate Firebug
To view XHTML or CSS source code for the page, simply click the “HTML” or “CSS” tabs in the Firebug sub-window. To edit either the XHTML or the CSS, simply click the “Edit” tab at the top – bear in mind that you cannot save these edits, except by cutting and pasting the code into your text editor (NotePad++ for PC or TextWrangler for Mac)
Viewing CSS code with Firebug
Note that some pages may use multiple external style sheet files. To swtich between style sheet files in Firebug, click on the drop-down list of file names at the top of the Firebug sub-window:
Switching between multiple CSS files in Firebug
Viewing Element Information (using the Firebug Add-on)
Similar to the the Web Developer Add-on, Firebug allows you to view the CSS and XHTML attribute information of any element on the page. To use this, select the “HTML” tab in the Firebug sub-window, and simply click on any tag name in the XHTML code that is displayed. Firebug will highlight that element on the page, as well as show you the corresponding CSS code in the right panel. Even if the corresponding CSS code is spread between several different external files, Firebug will compile them all in the right panel.
Viewing element information in Firebug
Additionally, Firebug allows you to visually see any element’s layout information by selecting “Layout” in the right panel:
Viewing element layout information in Firebug
Determining Exact Colors of Elements (using Colorzilla Add-on)
Using the Colorzilla Add-on, you can determine the exact color of any element on any page. To activate Colorzilla, click the eye-dropper icon on the bottom left of the browser window.
Activate Colorzilla by clicking on the eye-dropper at the bottom-left of the browser
Once activated, you can click on any element of the page, and the color information will show up in the bottom-left of the browser. Color codes are displayed in terms of both RGB (useful for PhotoShop work), as well as hexadecimal codes (useful in your CSS code).
Using Colorzilla to detect the color of the "Details" link at http://nyu.edu
No related posts.