User Styles

User styles let you change the way your browser displays web pages.

How to use the style rules listed on this page

Link appearance

Never underline text links (IE, Mozilla)
:link, :visited { text-decoration: none ! important }
:link:hover, :visited:hover { text-decoration: underline ! important }
Always underline text links (IE, Mozilla)
:link, :visited { text-decoration: underline ! important }
Always show a border around image links (Mozilla version)
/* Solid blue border for unvisited, dashed purple border for visited */
:link img { outline: 1px solid blue }
:visited img { outline: 1px dashed purple }
:focus img { outline: 2px dotted invert } /* Don't mask UA style */
:active img { outline: 1px solid red } /* Rarely triggered: bug 65917 */
Always show a border around image links (IE version)
/* This version breaks many site layouts! Use the Mozilla version if you can. */
:link img { border: 1px solid blue }
:visited img { border: 1px dashed purple }
:active img { border: 1px solid red }
Add an envelope symbol to mailto links (Mozilla)
a[href^="mailto:"]:before { content: "\2709 " }
Make javascript links green (Mozilla)
a[href^="javascript:"] { color: green ! important }
Blacklist link (Mozilla)
a[href*="goatse.cx/"]
{
  text-decoration: line-through ! important;
  color: brown ! important;
}

Other Styles

Show the page title at the top of the page (Mozilla)
/* I include colors because a background-color for the body affects the head. */
head { display: block; background-color: white; color: black; }
head * { display: none; }
title
{
  font-size: 160%; font-weight: bold; text-decoration: underline;
  display: inline; margin: .2em;
}
Put scrollbars at edge of window to make them easier to click when the window is maximized (IE)
html, body, frameset { border-right: 0px ! important }
Don't show scrollbar unless needed (IE)
/* This may make it impossible to scrolling using the keyboard! */
html, body { overflow-y: auto }
Set a maximum width for paragraphs (Mozilla)
p, blockquote { max-width: 30em; }
Always use my chosen font type (e.g., Times New Roman)
* { font-family: serif ! important; }
Hide reset buttons
input[type="reset"], button[type="reset"] { display:none }
Make focus more visible (Mozilla)
a:focus
{
  outline: 2px dotted ! important
}
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
{
  border: 2px dotted transparent;
}
button:focus::-moz-focus-inner,
input[type="reset"]:focus::-moz-focus-inner,
input[type="button"]:focus::-moz-focus-inner,
input[type="submit"]:focus::-moz-focus-inner,
{
  border-color: ButtonText;
}
Make focus very visible
/* Makes selections in textboxes hard to see: bug 56314 */
:focus
{
  background-color: black ! important;
  color: white ! important;
  outline: none;
}
:focus img { outline: 3px solid invert; }
Don't use italics
i, em { font-style: inherit; }
em { font-weight: bold }
Ignore cheap-effect tags
blink { text-decoration: none ! important }
marquee { -moz-binding: none ! important }
Show named anchors (Mozilla)
a[name]:before { content: "[#" attr(name) "] "; }
a[name] { border: 1px solid #ddd; }
Show tabindices and accesskeys (Mozilla)
*[accesskey]:after { content: " {" attr(accesskey) "}" }
*[tabindex]:after { content: " [" attr(tabindex) "]" }

Subpages

Links


© 2002-2007 Jesse Ruderman (jruderman@gmail.com).
Last modified January 31, 2007.