Tutorial Customizar Disfarçar ou Mudar a Aparência de um Site Acessado

Muitos são os motivos que levam os usuários a desejarem a possibilidade de modificar a aparência e tematizar
o site que acessa, seja para conseguir um melhor contraste para a leitura, ou por  não gostarem das cores do site,
e até mesmo para disfarçar o Facebook, Youtube...

Agora esse forma de customisação é totalmente possível utilizando css3 e um plugin comum para
firefox e google chrome

Aviso aos leigos:
- A mudança é claro fica a nível do seu navegador, não precisa se preocupar que o site original continuará intacto as mudanças apenas você é quem faz.

Siga o tutorial para mudar a aparência de qualquer site:

1. Para mudar a aparência de um site utilizando o plugin acesse e instale, em um dos navegadores abaixo o Stylish:
   versões Stylish  para  Firefox ou Stylish para Chrome.
2. Pronto, agora é só instalar, va nas configurações  e adicione os seus estilos css:

Exemplo de código do stylish:

Para o firefox para mudar a aparência de todos os sites acessados que possuem o domínio "com"

1. No firefox acesse no menu superior "FERRAMENTAS/Complementos"
2. Nos complementos acesse "Estilo de Usuário"
3. E add o código abaixo acessando "Escrever Novo Estilo"
4. Agora é só colocar o nome EX:"Blackout" e uma marca EX:"com"

/***********************|   INÍCIO DO CÓDIGO   |***********************************/
 @namespace url(http://www.w3.org/1999/xhtml);
 @-moz-document domain("com") {
     html {
     background: #000 !important;
    }
    body {
     background: #222222 !important;
     width: 1024px !important;
     margin: 0 auto !important;
    }
    div, span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
     background: #222222 !important;
     color: #BBBBBB !important;
     background-image: none !important;
    }
     a {
     color: #0072BC !important;
     text-decoration: none !important;
     text-shadow: 1px 1px #000000 !important;
    }
    a:hover {
     color: #889900 !important;
     text-decoration: none !important;
     text-shadow: 1px 1px #000000 !important;
    }
     h1, h2, h3, h4, h5, h6 {
     color: #ffffff !important;
     text-decoration: none !important;
     text-shadow: 1px 1px #000000 !important;
    }
    img {
     opacity: 0.1 !important;
    }
    img:hover {
    display:block !important;
    -moz-transition: opacity 0.4s ease-in 0s !important;
    opacity: 1 !important;
    }
    a:hover img {
    display:block !important;
    opacity: 1 !important;
    -moz-transition: opacity 0.4s ease-in 0s !important;
    }
     span {
    color: #559911 !important;
    }
    li {
    color:  #AA2222 !important;
    }
}

/***********************|   FIM DO CÓDIGO   |***********************************/

Aviso: Se você não souber nada de css pode encontrar outros estilos prontos na internet:
Estilos para Stylist
http://userstyles.org/categories/site