CSS Cheat Sheet
Boxes
margin *
margin-top
margin-right
margin-bottom
margin-left

padding *
padding-top
padding-right
padding-bottom
padding-left

border *
border-top *
border-bottom *
border-right *
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


Positioning
display
position
top
right
bottom
left
float
clear
z-index
direction
unicode-bidi
overflow
clip
visibility


Dimensions
width
min-width
max-width
height
min-height
max-height
line-height
vertical-align


Miscellaneous
content
quotes
counter-reset
counter-increment
marker-offset
list-style *
list-style-type
list-style-image
list-style-position

Shorthand properties
are marked with *

SYNTAX


   /* Comments */
   @media type {
   selector {
       property; values;
   }
   }                  (Media Type Optional)

SELECTORS



*
div
div *
div span
div, span
div > span
div + span

.class
div.class
#itemid
div#itemid
a[class]
a[class=’x’]
a[class~=’x’]


a[lang|=’en’]

Styles apply to:

All elements
<div>
Elements within <div>
<span> within <div>
<div> and <span>
<span> with <div> as parent
<span> preceded by <div> ... </div>
Elements of class "class"
<div> of class "class"
Element with id "itemid"
<div> with id "itemid"
<a> with class attribute
<a> when class is "x"
<a> when class is a list of space-generated values and one of those is ’x’
<a> when lang begins with "en"
PSEUDO-SELECTORS

:first-child
:first-line
:first-letter
:hover
:active
:focus
:link

:visited
:lang(lang)
Styles apply to:
First child of element
First line of element
First letter of element
Element when mouse over
Active element
Element with focus
Non-active, unvisited links without mouse over.
Visited links
Element with text of language "lang"
MEDIA TYPES (@media)

all
braille
embossed
handheld
print

projection
screen
speech
tty
tv
BOX MODEL

Box Model

UNITS

px
em

ex
%
in
cm
mm
pt
pc
#789abc
#acf
rgb(0,25,50)


0

Pixels
1em equal to font size of parent (same as 100%)
Height of lower case "x"
Percentage
Inches
Centimeters
Millimeters
1pt = 1/72in
1pc = 12pt
RGB Hex Notation
Equates to "#aaccff"
Value (0 to 255} of each red, green, blue. May also be percentages
0 requires no unit

PROPERTIES THAT INHERIT

azimuth
border-collapse
border-spacing
caption-side
color
cursor
direction
empty-cells
font
font-family
font-stretch
font-size
font-size-adjust
font-style
font-variant
font-weight
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
orphans
page
page-break-inside
quotes
speak
speak-header
text-align
text-indent
text-transform
volume
white-space
widows
word-spacing

Available free from
Cheatography.com


Download Windows CSS-Cheat-Sheet PDF file  Here .

Download Linux Command-Line-Sheet PDF file  Here .

Note:: To convert Pixels to em’s, simply divide Pixels by 16  .
Example(s):: 8px ÷ 16 = .5em  (OR)  90px ÷ 16 = 5.625em  .