How can I locate the default style sheet for a browser?
Asked Answered
H

11

37

I would like to see the specific style elements that are used in the default stylesheet for the various browsers. Do the browsers have an actual file based stylesheetss that I locate on my system and read? If so, what are the default locations of those files? If not, where I can find this information?

Hydrus answered 18/10, 2008 at 1:47 Comment(1)
Does this answer your question? Browsers' default CSS for HTML elementsNonconformance
L
19
Limen answered 18/10, 2008 at 15:40 Comment(2)
The webkit stylesheet can now be found at <trac.webkit.org/browser/trunk/WebCore/css/html.css>Sandberg
And they moved it again: trac.webkit.org/browser/trunk/Source/WebCore/css/html.cssWidmer
T
8

On Firefox, look for res/html.css, and the other CSS files in the same directory.

Or just open resource://gre-resources/forms.css in Firefox.

Thorne answered 18/10, 2008 at 3:32 Comment(1)
What is "in the same directory"; "same" as what?Ellen
R
5

Inspect html elements in the browser and find the css rules at the bottom right. You will find user agent styles or browser's styles (in Firefox named as html.css). copy the file location and open it in the tab - there you go.

Location default stylesheets

Firefox - resource://gre-resources/html.css
Chrome - https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css

you can find for others.

Bottom right of the screen: enter image description here

Retiary answered 10/7, 2018 at 12:12 Comment(3)
Please clarify what "bottom right" is. Maybe add an annotated screenshot.Ellen
@U.Windl Added screenshot for bottom right of the screen where you have the css rulesRetiary
Thanks, it really helps, because my screen layout is different for some reason (I have the web console at the bottom).Ellen
V
4

soypunk already mentioned the UA style sheet for WebKit.

The UA style sheet for Gecko in "standards mode" (see Activating Browser Modes with Doctype) consists of ua.css, forms.css and html.css. (See also quirk.css for "quirks mode".)

Opera does not have a UA style sheet as a .css file. (user.css mentioned previously is not the UA style sheet. It is the user style sheet.)

Veradis answered 1/1, 2009 at 21:6 Comment(3)
The mxr.mozilla.org links are no longer valid.Ellen
@U.Windl You can find previous versions, e.g. for quirk.css, via Wayback Machine.Cardiomegaly
Updated links from MXR to Searchfox.Veradis
P
1

In Mozilla Firefox enter this link to the address field: jar:file:///Applications/Firefox.app/Contents/Resources/omni.ja!/chrome/toolkit/res/

Here you will find all the default styles for Firefox. There are separate stylesheets for counters, forms, full-screen, general html, math, numbers, plain-text, quirks, ua, and viewsource.


For a more complete list of user agent stylesheets, see here.

Palaeobotany answered 26/2, 2015 at 21:15 Comment(2)
Practical example: the disk path was C:\Program Files\Mozilla Firefox\omni.ja where omni.ja is an archive in which the path continues as \chrome\toolkit\res\.Tessatessellate
Actually I found it easier to enter resource://gre-resources/ in the location bar. Then you see a directory listing with several *.css files like counterstyles.css and forms.css.Ellen
M
0

Some do some don't. (on a slightly different subject) I would recommend using a reset stylesheet.

http://developer.yahoo.com/yui/reset/

Manolo answered 18/10, 2008 at 2:4 Comment(1)
I use reset-fonts-grids/reset-fonts-grids.css. I can see what is being reset, I also want to see what each style is being reset from.Hydrus
K
0

In Safari, the Web Inspector will show you the CSS cascade for any element, including properties that were overridden, all the way back to the default CSS. Unfortunately, it won't show you the filename for that default CSS, but it will show you what properties were reset. Hopefully that helps a bit.

Kelsy answered 18/10, 2008 at 2:32 Comment(0)
B
0

Found some new working links (since those provided in top answer are dead).

Here you can find default stylesheets for various browsers:

Burglary answered 11/5, 2023 at 9:23 Comment(0)
F
-1

This may be tangential to the heart of your question, but if I'm right in guessing why you want this information, you may want to check out browsershots.org.

Browsershots makes screenshots of your Web design in different browsers.

In other words, you can see what your website looks like in many different browsers, browser versions, and platforms.

Frig answered 18/10, 2008 at 3:58 Comment(0)
M
-2

The default stylesheet is generally not available. I recommend starting your own stylesheet with a "reset styles" part, or including reset styles in a style sheet you load first. Eg.

<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/reset.css"></link>
<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/general.css"></link>

Eric Meyer ("the" Eric, just google Eric) offers a battle tested and widely used reset style sheet here: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Marylinmarylinda answered 18/10, 2008 at 9:23 Comment(0)
B
-2

In Opera, on OSX the file is located at /Applications/Opera.app/Contents/Resources/Styles/user.css

Bonnybonnyclabber answered 18/10, 2008 at 18:50 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.