Friday, September 30, 2011

CSS CHEAT SHEET

CSS CHEAT SHEET

SYNTAX
Syntax
selector {property: value;}
External Style Sheet
Internal Style
Inline Style
GENERAL
ClassString preceded by a period
IDString preceded by a hash mark
divFormats structure or block of text
spanInline formatting
colorForeground color
cursorAppearance of the cursor
display
block; inline; list-item; none
overflowHow content overflowing its box is handled
visible, hidden, scroll, auto
visibility
visible, hidden
FONT
font-style
Italic, normal
font-variant
normal, small-caps
font-weight
bold, normal, lighter, bolder, integer (100-900)
font-sizeSize of the font
font-familySpecific font(s) to be used
TEXT
letter-spacingSpace between letters
line-heightVertical distance between baselines
text-alignHorizontal alignment
text-decoration
blink, line-through, none, overline, underline
text-indentFirst line indentation
text-transform
capitalize, lowercase, uppercase
vertical-alignVertical alignment
word-spacingSpacing between words
BOX MODEL
CSS Box Modelheight; width; margin-top; margin-right; margin-bottom; margin-left; padding-top; padding-right; padding-bottom; padding-left;
BORDER
border-widthWidth of the border
border-style
dashed; dotted; double; groove; inset; outset; ridge; solid; none
border-colorColor of the border
POSITION
clearAny floating elements around the element?
both, left, right, none
floatFloats to a specified side
left, right, none
leftThe left position of an element
auto, length values (pt, in, cm, px)
topThe top position of an element
auto, length values (pt, in, cm, px)
position
static, relative, absolute
z-indexElement above or below overlapping elements?
auto, integer (higher numbers on top)
BACKGROUND
background-colorBackground color
background-imageBackground image
background-repeat
repeat, no-repeat, repeat-x, repeat-y
background-attachmentBackground image scroll with the element?
scroll, fixed
background-position
(x y), top, center, bottom, left, right
LIST
list-style-typeType of bullet or numbering in the list
disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none
list-style-positionPosition of the bullet or number in a list
inside; outside
list-style-imageImage to be used as the bullet in a list
* The properties for each selector are in the order they should appear when using shorthand notation.

Shorthand*

background
border
border-bottom
border-left
border-right
border-top
font
list-style
margin
padding

Comments

/* Comment */

Pseudo Selectors

:hover
:active
:focus
:link
:visited
:first-line
:first-letter

Media Types

all
braille
embossed
handheld
print
projection
screen
speech
tty
tv

Units

Length %
em
pt
px
Keywords bolder
lighter
larger

0 comments:

Post a Comment