CSS Cheat Sheet
CSS CHEAT SHEET
SYNTAX BOX MODEL
Shorthand*
Syntax height; width; margin-top; margin-right; margin-bottom;
background selector {property: value;} margin-left; padding-top; padding-right; padding-bottom;
border padding-left;
border-bottom External Style Sheet
border-left <link rel="stylesheet" type="text/css" href="style.css" />
border-right Internal Style
border-top <style type="text/css">
font selector {property: value;}
list-style </style>
margin Inline Style
padding <tag style="property: value">
Comments GENERAL BORDER
/* Comment */ Class String preceded by a period border-width Width of the border
ID String preceded by a hash mark border-style dashed; dotted; double; groove; inset; outset; ridge; solid; none
Pseudo div Formats structure or block of text border-color Color of the border
Selectors span Inline formatting
POSITION
color Foreground color
:hover clear Any floating elements around the element?
:active cursor Appearance of the cursor
both, left, right, none
:focus display block; inline; list-item; none
:link float Floats to a specified side
overflow How content overflowing its box is handled left, right, none
:visited
visible, hidden, scroll, auto
:first-line left The left position of an element
:first-letter visibility visible, hidden auto, length values (pt, in, cm, px)
Media FONT top The top position of an element
font-style Italic, normal auto, length values (pt, in, cm, px)
Types
font-variant normal, small-caps position static, relative, absolute
all
braille font-weight bold, normal, lighter, bolder, integer (100-900) z-index Element above or below overlapping elements?
embossed auto, integer (higher numbers on top)
handheld font-size Size of the font
print font-family Specific font(s) to be used BACKGROUND
projection TEXT background-color Background color
screen background-image Background image
speech letter-spacing Space between letters
line-height Vertical distance between baselines background-repeat repeat, no-repeat, repeat-x, repeat-y
tty
tv text-align Horizontal alignment background-attachment Background image scroll with the element?
text-decoration blink, line-through, none, overline, underline scroll, fixed
Units text-indent First line indentation background-position (x y), top, center, bottom, left, right
Length % text-transform capitalize, lowercase, uppercase
em LIST
pt vertical-align Vertical alignment list-style-type Type of bullet or numbering in the list
px word-spacing Spacing between words disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-
Keywords alpha; none
bolder list-style- Position of the bullet or number in a list
lighter position
larger inside; outside
list-style-image Image 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.
Pr.OUHNNI Hamid
