2024/1/24 16:29 CSS Cheat Sheet

CSS CHEAT SHEET

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

text-indent First line indentation

LIST
text-transform capitalize, lowercase, uppercase
list-style- Type of bullet or numbering in the list
vertical-align Vertical alignment type disc; circle; square; decimal; lower-roman; upper-
word-spacing Spacing between words roman; lower-alpha; upper-alpha; none
list-style- Position of the bullet or number in a list
position inside; outside
list-style- Image to be used as the bullet in a list
image

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

www.lesliefranke.com/files/reference/csscheatsheet.html 1/1