CSS CHEAT SHEET

Shorthand* SYNTAX BOX MODEL

background Syntax height; width; margin-
border selector {property: value;} top; margin-right;
border-bottom margin-bottom;
External Style Sheet
border-left margin-left; padding-
border-right <link rel="stylesheet" type="text/css" top; padding-right;
border-top href="style.css" /> padding-bottom;
font Internal Style padding-left;
list-style <style type="text/css">
margin selector {property: value;}
padding </style>
BORDER
Inline Style
Comments border- Width of the border
<tag style="property: value">
/* Comment */ width
border- dashed; dotted; double; groove; inset; outset;
Pseudo GENERAL style ridge; solid; none
Selectors Class String preceded by a period
border- Color of the border
ID String preceded by a hash mark color
:hover
:active div Formats structure or block of text
:focus span Inline formatting
POSITION
:link clear Any floating elements around the element?
color Foreground color
:visited both, left, right, none
:first-line cursor Appearance of the cursor
:first-letter display float Floats to a specified side
block; inline; list-item; none
left, right, none
overflow How content overflowing its box is
Media handled left The left position of an element
Types visible, hidden, scroll, auto auto, length values (pt, in, cm, px)

all visibility visible, hidden top The top position of an element

braille auto, length values (pt, in, cm, px)
embossed
handheld
FONT position static, relative, absolute
print font- Italic, normal z-index Element above or below overlapping
projection style elements?
screen font- normal, small-caps auto, integer (higher numbers on top)
speech variant
tty
font- bold, normal, lighter, bolder, integer BACKGROUND
tv
weight (100-900) background-color Background color
Units font-size Size of the font background-image Background image
Length % font- Specific font(s) to be used background- repeat, no-repeat, repeat-x, repeat-
em family repeat y
pt
TEXT background- Background image scroll with the
px
attachment element?
Keywords letter- Space between letters
scroll, fixed
bolder spacing
lighter line-height Vertical distance between background- (x y), top, center, bottom, left, right
larger baselines position

text-align Horizontal alignment

LIST
text- blink, line-through, none, list- Type of bullet or numbering in the list
decoration overline, underline
style- disc; circle; square; decimal; lower-roman;

http://www.lesliefranke.com/files/reference/csscheatsheet.html 24/02/24 15 57
Page 1 sur 2
:
 text-indent First line indentation type upper-roman; lower-alpha; upper-alpha; none
text- capitalize, lowercase, uppercase list- Position of the bullet or number in a list
transform style- inside; outside
vertical- Vertical alignment position
align list- Image to be used as the bullet in a list
word- Spacing between words style-
spacing image

* The properties for each selector are in the order they should appear when using shorthand notation.

http://www.lesliefranke.com/files/reference/csscheatsheet.html 24/02/24 15 57
Page 2 sur 2
: