Css Cheat Sheet
Css Cheat Sheet
Css Cheat Sheet
Syntax
/* Comments */
@media type {
selector {
property: value;
}
}
Box Model
Note:
media type is optional
TOP
BORDER
Embedded Style
<head>
<style type="text/css">
selector { property: value; }
</style>
</head>
External Style Sheet
<head>
<link rel="stylesheet"
type="text/css" href="style.css" />
</head>
Selectors
*
All elements
tag
tag *
tag tag2
tag, tag2
tag + tag2
.class
tag.class
#id
Element with id id
tag#id
Tag with id id
CONTENT
PADDING
MARGIN
BOTTOM
Boxes
margin
margin-top
margin-right
margin-bottom
margin-left
padding
padding-top
padding-right
padding-bottom
padding-left
border
border-top
border-right
border-bottom
border-left
border-color
border-top-color
border-right-color
border-bottom-color
border-left-color
border-style
border-top-style
border-right-style
border-bottom-style
border-left-style
border-width
border-top-width
border-right-width
border-bottom-width
border-left-width
RIGHT
HEIGHT
Inline Style
<tag style="property: value;">
LEFT
WIDTH
Pseudo-selectors
em | rem | ex | ch
vw | vh | vmin | vmax | %
Absolute
sizes
cm | mm | in | px | pt | pc
:first-child
Colors
:first-letter
:first-line
:active
:after
:before
Hex #ff00ff
RGB rgb(255,0,255)
Positioning
position
float
:focus
:hover
:link
top, right,
bottom, left
:visited
clear
display
overflow
visibility
z-index
Text
font-family
font-size
font-style
font-variant
font-weight
Dimensions
color
height
line-height
max-height
text-align
max-height
textdecoration
max-width
min-height
int | % | inherit
text-indent
int | % | inherit
min-width
int | % | inherit
texttransform
width
vertical
-align
background
Format:
background (color) (image)
(repeat) (position)
white
-space
cursor
wordspacing
quotes
Other