CSS quick reference

CSS quick reference

Background and Color Properties

Color names: aqua | black | blue | fuchsia | gray | green | lime | maroon | navy | olive | purple | red | silver | teal | white | yellow

color: #RGB | #RRGGBB;

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];

background-attachment: scroll | fixed;

background-color: #RGB | #RRGGBB | transparent;

background-image: url('path_to_image') | none;

background-repeat: repeat | repeat-x | repeat-y | no-repeat;

background-position: [ NN% | NNpt | NNpx ] [ top | center | bottom ] [ left | center | right ];

Font Properties

font: font-style font-variant font-weight font-size font-family;

font-family: [ family-name | generic, ] ... ;

font-size: [ NN% | NNpt | NNpx | (larger | smaller) ];

font-style: [ normal | italic ];

font-variant: [ normal | small-caps ];

font-weight: [ normal | bold | bolder | lighter | 100 ... 900 ];

Text Properties

text-align: left | right | center | justify;

text-decoration: none | blink | line-through | underline | overline;

text-indent: NN% | NNpt | NNpx;

text-transform: none | capitalize | uppercase | lowercase;

Block Properties

display: block | inline | inline-block | list-item | none;

clear: left | right | none | both;

float: left | right | none;

width: auto | NN% | NNpt | NNpx;

height: auto | NNpt | NNpx;

Margins

margin: auto | NN% | NNpt | NNpx | margin-top margin-right margin-bottom margin-left | margin-vertical margin-horizontal;

margin-top: auto | NN% | NNpt | NNpx;

margin-bottom: auto | NN% | NNpt | NNpx;

margin-left: auto | NN% | NNpt | NNpx;

margin-right: auto | NN% | NNpt | NNpx;

Paddings

padding: auto | NN% | NNpt | NNpx | padding-top padding-right padding-bottom padding-left | padding-vertical padding-horizontal;

padding-top: auto | NN% | NNpt | NNpx;

padding-bottom: auto | NN% | NNpt | NNpx;

padding-left: auto | NN% | NNpt | NNpx;

padding-right: auto | NN% | NNpt | NNpx;

Borders

border: border-width border-style border-color;

border-top: border-width border-style border-color;

border-bottom: border-width border-style border-color;

border-left: border-width border-style border-color;

border-right: border-width border-style border-color;

border-color: #RGB | #RRGGBB;

border-width: thin | medium | thick | NNpt | NNpx;

border-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset;

List Properties

list-style: type position image;

list-style-image: url('path_to_image') | none;

list-style-position: inside | outside;

list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none;