Stylish Guide

updated June 24 2008

you need to learn about Cascading Style Sheets (check out the css specs for a more complete listing then below)
you'll also need an extension to figure out what you want to change (DOMi firebug webdeveloper? aardvark)

i like to use DOMi with LouCypher's InspectChrome.uc.js script (needs UserChrome.js extension)
download (extension + script)
if you have those you can right click on part of a website/firefox, then click Inspect and have it show up in DOMi


cheat sheet
direct link

view css code for this website (search for #stylishguide)
download html/css for this website

example style

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("userstyles.org")
{
body{background-color:red!important;color:black!important}
}

/* skip the next example for a description of this one */

*{background:#000!important;color:#FFF!important;font-size:18px!important}

/*
very basic style, makes black bg with white text everywhere and bigger text size
some sites use background-image to add pictures. this code will override them (the above one wont as it uses background-color)
*/

selectors

for ids/classes
use

#someid

or

.someclass

instead of [id="someid"]

click me
in the right screenshot on the rightside you can use one of these to select that input (or others)

input[id="before-screenshot-none"]

has to be an input with an id of before-screenshot-none

[id="before-screenshot-none"]

any with that id

#before-screenshot-none

same but shorter to type

[id]

anything with an id

input

any inputs

[id$="screenshot-none"]

any id that ends with screenshot-none

[id^="before"]

any id that starts with before

[id*="screenshot"]

any id that contains screenshot

#someid[type]

needs the id and type

in the leftside a bit below the input theres a tr with a th and td, those two are direct descentdants
you can use

tr > td

to select any td with a tr direct parent or

tr div

to select any div children with a tr parent

tr div label

that would select any labels that have a tr then div parent

tr>div > label

this wouldnt select the label in the screenshot since i didnt include the td

th + td

to select adjacent siblings
then theres stuff like

th:first-child+td

selects a td if theres a th just above it that's the first child element (#text is ignored) or

:last-child

:only-child

if you notice on a webpage html is the parent for body and head. :only-child wont select either of them since body and head are siblings of each other

:first-line

:first-letter

:empty

doesnt have any children

:hover

(mouseover)

:active

(clicked)

:focus

(accepting input)

:-moz-any-link

any links

:link

links

:visited

visited links

[id]:not(input)

anything with an id but not inputs or

:not(.someclass) :not([type="blah"]) :not(:first-child)

*

everything

declarations

where the fun begins

you can use words: black lightblue / hex: #FFF (white) / RGB (red green blue 0-255): rgb(0,138,255) and so on
see stylish>write style>insert>colors for some predefined ones
some can also use transparent (see the specs to find out which or experimentation)

background-image

stick an image in the background of an element {background-image:url("http://website.com/picture.png")}

background-position

used to postion the image, center it: {background-position:center center}

background-repeat

if you dont want the image to repeat use no-repeat or repeat-x repeat-y

im not going to go too far into shortform with this guide {background:red url("chrome://branding/content/about.png") center center no-repeat}
theres an extension called chrome list if you want to use some icon you see in ff or an extension

color

change text colour

text-align

align text to left right center

vertical-align

top middle bottom

text-decoration

none underline overline line-through blink

direction

ltr rtl

position

place an element of a webpage static relative absolute fixed

top

bottom

left

right

make something fixed to the bottom of the page {position:fixed;bottom:0}
use absolute if you dont want it to stay there while you scroll (absolute doesnt always place at the top of the page)
if it already has something for top and you want it at the bottom use {top:auto;bottom:5pt}

width

size it will be

min-width

be at least this size

max-width

be no wider then this size

height

min-height

max-height

use {max-height:none} if it has a max-height you want to remove

padding

inside of element

margin

outside of element

border

outline

-moz-border-radius

font-family

change the font {font-family:Arial}

font-style

normal italic oblique

font-size

use the usual measurements (see measurements section)

font-size-adjust

use ratio between lowercase x and font-size to choose font size {font-size-adjust:.46} (goes from 0 to 1)

cursor

auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help progress

opacity

1=visible 0.5=50% visible 0=not visible

z-index

make something {z-index:1} then another 2 and 2 will be on top of 1

visibility

visible hidden collapse, if you want to make something hidden but still take up space

overflow

visible hidden auto scroll, add scrollbars to long stuff (use with max-width/height)

-moz-box-ordinal-group

change the order of menuitems buttons and whatnot (lower first higher last)

-moz-box-direction

normal reverse, change the directions of stuff

-moz-box-orient

horizontal vertical, make something vertical or horizontal

-moz-appearance

none button menu and others, sometimes needs {-moz-appearance:none} to change firefox controls

content

used with :before/:after to add content (text/images)

para1

para2

{content:attr(href)}
using attr

measurements

0

zero

4px

pixels

5pt

1pt=1/72 inches

2pc

1pc=12pt

5ex

height of lower case x

3em

1em=font size of parent (100%)

10%

percentage

5in

inches

10cm

centimetres

5mm

millimetres

changelog

June 24 2008

[id$="before"]

any id that starts with before
to

[id^="before"]

any id that starts with before
(oops)
changed example style highlights and :hover / :active examples

Feb 1 2008

fixed up some stuff
added a more basic style example/some info about comments
made background-image a bit more informative

Dec 24 2007

added a few more things
little bit of speelchecking

Dec 20 2007

initial release


more stuff to come later