Applying CSS sheet to browser

Question

I met a person who can't stop writing everything in uppercase in the internet. She has eye problems and just doesn't want to zoom in and out all the time to read lowercase.

I would like to write a CSS style sheet that converts all the text in a page to uppercase. With some googling I can do this alone, but if anyone can help me here that would be useful.

Most important, I want to apply this CSS sheet to the browser: is this possible?

Answer 1

To make everything uppercase use * {text-transform:uppercase;}​

jsFiddle example

It's possible to change the browser's default style sheet however each browser has a different way of doing this.

Answer 2

One of the simplest ways is probably to use Stylish in Firefox. It lets you add a style sheet to be applied on all pages, in a manner that is easy to switch off then needed. And you could simply write

* { text-transform: uppercase !important; }

Without the !important specifier, the style sheet would be ineffective as regards to elements that have text-transform set in page style sheet.

Note that this only changes the display of characters. When typing text in a textbox, without using the shift key, it would be displayed in upper case but, upon form submission, as well as in any scripted processing in the browser, it would still be in lower case.