User Styles: example rules for user style sheets

User Styles

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

How to use the style rules listed on this page

To use a style on all sites: use Stylish (a Firefox extension), or manually put the style in a user style sheet.
To use a style on a specific site: use per-site rules (Firefox only) with the methods above.
To use a style whenever you click a button: use the bookmarklet creation tool to make a personal toolbar button that adds style rules to a page.
To use a style once: use the test styles bookmarklet and type the styles into the window that appears.

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) "]" }

User Styles

How to use the style rules listed on this page

Link appearance

Other Styles

Subpages

Links