Tip of the day: Setting a default stylesheet for Chrome
29 March, 2013 Leave a comment
I often type up HTML documents in a text editor and view them directly in my browser to review then. However I don’t like the default style, I don’t find it is very readable. It is too plain and dull. What I really want is to provide a style sheet that make the document styled more to my taste, yet I don’t want to have to litter my HTML files with uncessesary mark up linking to stylesheets.
Luckily Chrome has a custom.css file, which is empty by default, which you can use to provide your own CSS that is used when rendering documents and no other style information is available.
On windows this Custom.css file is located at: C:\Users\<username>\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css
I’ve created my own style sheet, which can be found as a Gist on GitHub: Custom.css.
This is great. My plain HTML documents that I use for writing up blog posts and the like now look a lot better and without me having to put in references to CSS. It also means that the file can contain just the HTML body (no <head> or <html> tags) so I can lazily perform a Ctrl+A, Ctrl+C on the document and then drop it in to my blog.
There is one slight problem with all of this… Depending on how far you go with the styling, a little light play with fonts is okay, but some things like setting borders, margins, colours and widths can mess up existing sites because they don’t expect the base style sheet to contain those elements. But then again, maybe that’s a good thing if you are a front end web developer. It ensures that you don’t make assumptions that may not be valid.
