Reveal ANGEL CSS ID and Class

The ANGEL stylesheet is a complex and powerful part of customizing your ANGEL course, so who wouldn't want to make this task as easy as possible? Within the ANGEL stylesheet are many ID and Class selectors waiting to be deciphered. While the Fully Commented Stylesheet can help you understand what an ID or Class selector means within the CSS, you can use this extension to reveal exactly where these selectors live while viewing your ANGEL course!

Step 1: Download and install the Mozilla Firefox browser (skip to Step 2 if you already have it)

• Visit this site: http://www.mozilla.com/firefox and download the Firefox Browser.

Step 2: Obtain and install the Web Developer extension for Firefox

• In your Firefox browser click "Tools" in the menus at the top of the browser window.
• Now in the Tools menu click "Extensions".
• In the Extensions area, click the link for "Get More Extensions" in the bottom of the window.
• This is a list of Extensions for Firefox, find the "Web Developer" extension, and click it.
• You will be taken down the page to a description for this Extension and in the description area will be a link to Install Now , click this link.
• The Extension will download and you can install it. You will then be asked to restart your browser.

Step 3: Using the extension
Now that you have the tools you need, how to use the extension.

• Open Firefox and proceed to your ANGEL course. You may now notice that the Web Developers toolbar has made itself at home under the address field in your browser. You may also notice new contextual items added to your right click menu that contain nearly all of Web Developers features.
• Once you are inside your course, locate the Information button in the Web Developer Toolbar. Click this button and in the drop down menu, locate and click Display ID & Class details.
• Bam! Your page will now change to display all the ID and Class selectors inside the page you are viewing. The selectors will appear next to the content they format. ID selectors are signified by blue boxes and Class selectors are red boxes. This will help you understand which selector is formatting specific areas of your course or website. You can see above how your page will change to display the selectors. There's so many!

  

  Hint: It's important to keep in mind that Cascading Style Sheets are named for a reason - because they cascade! If you find that altering a selector doesn't change anything one of the reasons may be that a selector higher in the cascade hierarchy is already formatting it. With some exploration, you can use the Web Developers Extension to understand the hierarchy and determine where to make your changes to the CSS.

Step 4: Tips on using the extension
Angel is a frames-based site and this has the tendency to bring forth one of Web Developer's unforeseen issues. You may find that revealing ID's and Classes makes your page expand horizontally pushing some of the revealed properties completely off the page! No problem right? You can just horizontally scroll - wrong! The coding of ANGEL's frames-based presentation thwarts the pages ability to scroll horizontally when the Web Developer ID/Class reveal feature is used. To remedy this issue, we will separate out the pages in the frames using this method:

• Right-click on the desired area and select "This Frame" and then "Show Only This Frame"
  
• You have now separated the frames. Use the reveal feature again, and you should now be able to horizontally scroll the page to view the ID's and Classes that are pushed out of view of the browser pane.