Click on an attribute to view the definition and examples below:
SELECTORS
p
#id
.class
a:link
a:active
a:hover
a:visited
TEXT
font-size
font-family
font-weight
font-style
text-align
text-indent
text-transform
text-decoration
letter-spacing
line-height
POSITIONING
position
display
padding
margin
top
float
clear
overflow
z-index
DIMENSIONS
width
height
min-width
max-width
min-height
max-height
vertical-align
BORDERS
border
border-width
border-color
border-style
border-image
OTHER
color
opacity
cursor
background
list-style-type
SELECTORS
p – defines and styles a paragraph
#id – styles a specific “div” tag
.class – styles all elements within a specific class
a:link – styles a hyperlink
a:active – styles an active link
a:hover – styles a hovered link
a:visited – styles a visited link
TEXT
font-size – size of text (font-size: 12px;)
font-family – typeface of text (font-family: helvetica, sans-serif;)
font-weight – heaviness of a font (font-weight: 500;)
font-style – style of a font (font-style: normal;)
text-align – alignment of text (text-align:center;)
text-indent – indentation of text (text-indent: 25px;)
text-transform – capitalization of text (text-transform: uppercase;)
text-decoration – decoration of text (text-decoration: underline;)
letter-spacing – spacing of letters (letter-spacing: 1px;)
line-height – line height in a paragraph (line-height: 1.5;)
POSITIONING
position – sets the position of an element. (position: absolute; – other options: relative, static, fixed)
display – defines how an element is placed on the page (display:none; display: inline-block;)
padding – creates padding within the border of an element (padding-top: 10px;)
margin – forms a margin outside of the border of an element (margin-top: 40px;)
top, (right, left, bottom) – controls margin edge of an element, must be used with “position” attribute” (top: 20px;)
float – allows elements to be placed side by side. (float: left;)
clear – decides where an element on the next row will be in relation to the previous row (clear: both; clear: left;)
overflow – decides what will happen if the content overflows the element’s box (overflow: hidden; overflow: scroll;)
z-index – sets the order in which elements are layered/stacked (z-index: 1; z-index: 9999;)
DIMENSIONS
width – controls width of an element (width:300px;)
height – declares height of an element (height:200px;)
min-width – declares minimum width of an element (min-width:1000px;)
max-width – declares maximum width of an element (max-width:1000px;)
min-height – declares minimum height of an element (min-height:1000px;)
max-height – declares maximum height of an element (max-height:1000px;)
vertical-align – sets vertical alignment of an element (vertical-align:middle;)
BORDERS
border – adds a border to an element
border-width – controls width of border (border-width: 1px;)
border-color – changes color of border (border-color: #000000;)
border-style – changes style of border (border-style: dashed;)
border-image – add background image to border (border-image: url(image.png);)
OTHER
color – changes color of an element, usually text (color:#f0f0f0;)
cursor – changes cursor style when rolling over links or images (cursor:pointer;)
background – adds background to an element (background:#303030; or background:url(image.png) repeat-x;)
list-style-type – sets the marker at the font of each list item (list-style-type: none;)
If you want to pin this, here is a flat image: