Internet Explorer Developer Tools: The CSS Tab

Pete LePage | August 24, 2010

 

In continuing my series about the Internet Developer Tools that come built into Internet Explorer,  today I’ll take a look at the CSS Tab and how you can use it to add, edit, change, or remove CSS rules and dive deeper in to the CSS on your page, where styles are coming from and such.

The CSS Tab

The CSS tab shows the all of the CSS files that your page includes via embedded, linked style sheets, or imported style sheets.  Like all of the other tabs, it includes the standard menu bar, the ability to change rendering and browser mode, and the standard buttons Select Element By Click, Clear Browser Cache and Save buttons .  Beside the standard buttons is a drop down list that allows you to choose which set of styles you want to look at.  It includes all of the styles that Internet Explorer loads for that page, including iFrames.

If you have multiple embedded style blocks, each block will be listed separately within the drop down list.  iFrame styles are denoted by the square brackets around the name of the [] stylesheet, for example [iframeSource.htm] stylesheet.css.  As you change the drop down, the contents of the CSS display box will show all the rules, along with their individual attributes.

Using the CSS Tools

Like the HTML tab, you can turn on and off rules, or the individual attributes as well as add, remove or edit all of their values and see the changes in real time. 

Getting Started

1. If you’re in Internet Explorer now, hit F12, if you aren’t switch over to IE8 and load a site that has a bunch of CSS and HTML on it then hit F12 (pretty much page).  See if you can find a site that has at least one iFrame on it so you can see how iFrames look as well.
2. Switch over to the CSS tab to see all of the CSS files that are loaded on the page you’re viewing.
   
   You’ll now see a list of all the rules that are defined within the selected style.

Turning Rules or Attributes On and Off

The easiest way to turn off style rules or individual attributes within those is to use the checkbox beside each node.  Unchecking the rule turns off all of the attributes for that rule, or you can simply choose to turn off the specific attributes.

Changing Existing Rules or Attributes

To change an existing rule, you can do the same thing as in the HTML tab, simply click on the item you want to edit and Internet Explorer will change that item into edit mode.  You can change the rule names, attribute names and the attribute values.  After you’ve made your change, hit enter and IE will apply the changes to your page.

Adding or Removing Rules or Attributes

This is one of the cooler features of the CSS tab that I often forget about because surfacing it isn’t super obvious.  If you right click on a rule or attribute, a content menu appears that allows you to add or delete attributes and rules.  You can choose where you want them to fit within the cascade via the Add Rule Before or All Rule After.

When adding an attribute, you do it pretty much exactly like you would type it in a style sheet or style block.  When I click Add Attribute, the dev tools create a new node for me in the tree view, and I type the style I want to add, followed by a colon, then IE pops me over to a new text box where I can type the value for that style followed by a semi-colon. Once I hit enter, IE will update the page with my changes.

Adding a new rule is similar, in that you click Add Rule After (or Before), and it creates a new node in the tree in the appropriate place.  Then using the same Add Attribute right click, you add the appropriate attributes to that node.

CSS Editing with Internet Explorer Developer Tools

There you go. Hopefully this will make your editing and debugging of CSS a little easier!  Stay tuned for posts on debugging and profiling your JavaScript code!