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