1

For example, an anchor tag, if not explicitly given a style, already has a style. It is blue, it goes purple when visited, and changes the cursor on hover.

Where does Chrome load these styles from?

Is there a Google Chrome style-sheet on my computer, or accessed by chrome through a rel link that has entries like :

...
a.visited {
    color:purple; /* just because */
}
a.hover {
    cursor:pointer;
}
... /* dozens of other CSS styles */

Where can I find this Google Chrome style-sheet file, or online resource?

Ideally, something like : chrome://internals/styles

Or something like : http://cdn.google.com/chrome/html.css

Cris Stringfellow
  • 3,714
  • 26
  • 48
  • my guess would be that they are defined in the HTML spec. So that by default an anchor tag will be blue and underlined. Browsers then simply apply/implement/support/render the w3c standard. Checking out the html spec would be a good starting point. A browser stylesheet as such would be more like a theme or skin the user could add and customizes themselves, and not something directly editable. – lukeocom Mar 11 '13 at 06:38
  • 1
    my guess was wrong! haha. the w3c has this to say about links in particular - 'User agents generally render links in such a way as to make them obvious to users (underlining, reverse video, etc.). The exact rendering depends on the user agent'. from the html4 spec http://www.w3.org/TR/REC-html40/struct/links.html#h-12.2 – lukeocom Mar 11 '13 at 06:42
  • A link to the Chrome style sheet is the first link of the accepted answer in the duplicate. – JJJ Mar 11 '13 at 06:44
  • @Juhana true. And that does provide the styles. It's interesting. But what I want is "how does Chrome load this stylesheet" ? Is it internal in the compiled libraries, is it a file on my hard disk or is it loaded from an online resource? – Cris Stringfellow Mar 11 '13 at 06:52

2 Answers2

2

All browsers have a user agent stylesheet. This is essentially the default styles that they decide to apply, there are no requirements or official standards, though browsers will always try to behave as you would expect (blue hyperlinks, purple once clicked, etc).

The webkit one can be found here

Other browsers can be found here

When you inspect element you will notice certain styles. For example, Inspect any element on a webpage then click the <head> tag. You will notice the following:

user agent

A head is just like any other element so it would normally appear on your web page. Obviously this isn't what developers want, and they certainly don't want to have to hide the head in every stylesheet so the user agent does it for them, as default.

Community
  • 1
  • 1
Andy
  • 14,427
  • 3
  • 52
  • 76
  • 1
    @CrisStringfellow Yeah (though you shouldnt). Try adding the style `display: block; height: 200px; background: red;` to the `head` and you can see that the head is the same as any other element. – Andy Mar 11 '13 at 15:47
  • 1
    I just did that. It was a weird moment. – Cris Stringfellow Mar 11 '13 at 15:48
1

Take a look at these two links.

http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Browsers' default CSS for HTML elements

They should help you out a little.

Community
  • 1
  • 1
micp
  • 93
  • 5