How to view Firefox’s default internal CSS stylesheet

With the current dialogue about the merit of using a reset.css stylesheet within your front-end development workflow I thought it might be intriguing to delve into the inner workings of Firefox to see what the actual default styles were. The reasoning behind using a reset.css is this: with every browsers providing it’s own interpretation on each HTML element default styling, developing consistent pixel perfect designs is difficult unless you reset all the default styles back to ground zero before applying your own design. While I will not debate the pros and cons of a reset stylesheet here and now I will show you two ways of accessing Mozilla Firefox’s default stylesheet. After some digging around on my XP file system I came across the following directory: C:\Program Files\Mozilla Firefox\res and within that directory are the following Cascading Style Sheets:

  1. EditorOverride.css
  2. forms.css
  3. html.css
  4. mathml.css
  5. quirk.css
  6. svg.css
  7. ua.css
  8. viewsource.css

Note you can also access these stylesheets by typing: resource://gre/res/html.css and: resource://gre/res/forms.css etc, etc into the address bar. With this information on board we should have an easier time deciding if we really need to change the default behavior of the current element we are styling.

Related Posts

Technorati Tags: , , , ,

Bookmarks:
  • Digg
  • Technorati
  • del.icio.us
  • Ma.gnolia
  • Reddit
  • Netscape
  • StumbleUpon
  • NewsVine

This entry was posted on Sunday, July 6th, 2008 at 10:44 pm and is filed under Web Standards, Web, CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

« Caravan Cafe: a burger to remember, Seymour style
How to turn off Safari’s textarea expand »

15 Responses to “How to view Firefox’s default internal CSS stylesheet”

  1. Dasweat Says:
    December 11th, 2008 at 9:17 pm

    Awesome tip James! Had no idea that browsers had their own internal default stylesheets..

  2. James Oppenheim Says:
    August 30th, 2009 at 4:20 pm

    Interesting to note, in the new version of Firebug v1.4.2 (not sure when it got introduced) when on the HTML tab you can select ‘Show User Agent CSS’ from the style dropdown menu. This will show you what the default styles are. Handy indeed.

  3. Laloeka Says:
    October 10th, 2009 at 12:37 am

    Note:
    Your browser won’t repair the file if you change/damage it.
    BE SURE TO BACKUP IF YOUR’RE GOING TO MAKE SOME CHANGES!

  4. Andrew Moizer Says:
    April 26th, 2010 at 1:22 am

    Thanks for this. Confirms a weird (to me anyway) problem I was having where I couldn’t understand where the font colour property was coming from (and why it wasn’t being inherited). At least I could confirm that the computed result did indeed come from the default Firefox style sheet.

    cheers, Andrew

  5. bineet kumar chaubey Says:
    October 14th, 2010 at 3:25 pm

    how we can disable these stylesheet from about page .please tell me. thanks

  6. Frida Says:
    November 17th, 2010 at 10:44 pm

    Wow, thanks a lot! I’ve spent some time now trying to figure out which elements I really need to change the default values for, and which I don’t need to do. This helps a lot!

  7. Burberry bag Says:
    December 16th, 2010 at 1:35 am

    …

    What a great resource!…

  8. FireFox’s buttons are wider than IE or Chrome/Safari ‹ Abstract Sequential – You make it pretty - I make it work. Says:
    March 10th, 2011 at 8:29 am

    […] I found this with a little help from this article on viewing FireFox’s default style sheets. The observant among you may notice there is another style in there. It is for keyboard navigation. Use your new found powers wisely, don’t remove it without replacing it. […]

  9. FireFox’s buttons are wider than IE or Chrome/Safari’s ‹ Abstract Sequential – You make it pretty - I make it work. Says:
    March 10th, 2011 at 8:31 am

    […] I found this with a little help from this article on viewing FireFox’s default style sheets. The observant among you may notice there is another style in there. It is for keyboard navigation. Use your new found powers wisely, don’t remove it without replacing it. […]

  10. John Says:
    April 29th, 2011 at 4:13 am

    It’s not that hard to figure out where the internal sheets are for Gecko browsers or WebKit browsers. What I’m trying to figure out is: is there any way to see what the internal CSS rules are for Explorer?

  11. Josh Says:
    June 27th, 2011 at 6:43 pm

    Hello, nice useful article.

    But I cant seem to get it to work in firefox 4?

    Has the URL changed now?

    Thanks

  12. James Oppenheim Says:
    June 29th, 2011 at 10:03 pm

    @Josh - so it looks like firefox 4 and 5 use a new packaging format called omnijar. You can read more about it here: http://blog.mozilla.com/mwu/2010/08/13/omnijar-how-does-it-work/

    Also, on windows 7 I can still get to the files using: jar:file:///C:/Program%20Files/Mozilla%20Firefox/omni.jar!/

  13. Massage Therapist Fitchburg Says:
    January 19th, 2012 at 9:40 am

    I’ve learned so much on-line within the past four years. the bulk of my data I attribute to reading great blogs like yours. Thank you

  14. ie for mac Says:
    January 24th, 2012 at 1:23 am

    ie for mac…

    […]How to view Firefox’s default internal CSS stylesheet | James Oppenheim’s blog[…]…

  15. Shavonda Says:
    February 3rd, 2012 at 1:35 pm

    Stumbled…

    […]I was looking around on Stumble Upon and found that a lot of people recommended this[…]…

Leave a Reply