CSS cheat sheet
Many CSS statements can simplified and expressed in shorthand form. For example, setting all four margins to 20 pixels can be expressed: margin-top: 20px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px;; or using the shorthand method: margin 20px;.
The CSS cheat sheet provides an at-a-glance perspective of common CSS practices; it's one of the few times when cheating won't ruin your karma.
Style sheet references
<link rel="stylesheet" type="text/css" href="site.css" />
A basic reference to a Cascading Style Sheet (CSS) file titled “site.css” (typically 4.0+ browsers)
<style type="text/css" media="all">@import "doc.css";</style>
A sophistocated reference to a Cascading Style Sheet (CSS) file titled “doc.css” (typically 5.0+ browsers)
Class and ID
Class is represented in CSS as . (period); ID as # (pound).
Example
HTML: <p class="caption">
CSS reference: p.caption or .caption
HTML: <h1 id="logo">
CSS reference: h1#logo or #logo
Font
font-family: Verdana, sans-serif;
font-style: italic;
font-weight: bold;
font-size: 12px;
Shorthand
font: bold 12px italic Verdana, sans-serif;
Renders the text of an element 12 pixels tall, in italic Verdana.
Font-family generic values: serif (Times), sans-serif (Helvetica or the terrible rip-off Arial), cursive (Zapf-Chancery), fantasy (Western), and monospace (Courier).
Font-style values: normal (default), italic, and oblique.
Font-weight values: normal, bold, bolder, lighter, 100, 200, 300, 400 (or normal), 500, 600, 700 (or bold), 800, and 900.
Other text properties
All values can be px, em, or % (percent)
word-spacing: 11px;
Adjusts spacing between words.
letter-spacing: 100%;
Adjusts spacing between letters (tracking).
line-spacing: 3em;
Adjusts spacing between lines (leading).
Hint: line-height can be controled in the shorthand form of font (e.g. font: 11px/3em Georgia, Times, serif;).
text-align: right;
Describes how text is aligned in an element (left, right, center, or justify).
text-transform: uppercase;
Transform any characters to another case (uppercase, lowercase, capitalize, or none).
Margin
margin-left: 20%;
margin-top: 50px;
margin-right: 20%;
margin-bottom: 50px;
Shorthand (think clockwise: 12, 3, 6, 9)
margin: 20% 50px 20% 50px; or
margin: 20% 50px;
Creates left and right margins that are 20% of the element’s width and 50px above and below the element; if no width is specified, the parent elements width is referenced, typically a <table>, <div> or the width of <body>.
Padding
padding-left: 2em;
padding-top: 20px;
padding-right: 2em;
padding-bottom: 20px;
Shorthand (think clockwise: 12, 3, 6, 9)
padding: 2em 20px 2em 20px; or
padding: 2em 20px;
Creates left and right padding that is 2em (relative to the elements size); if no size is specified, the parent elements size is referenced, typically the font property of a <table>, <div> or the width of <body>.
Border
border-style: dotted;
border-color: #3355AA;
border-top: 1px;
border-right: 1px;
border-bottom: 1px;
border-left: 1px;
Shorthand (think clockwise: 12, 3, 6, 9)
border 1px dotted #3355AA; or
padding 2em 20px;
Creates 1px wide borders of the color #3355AA around an element.
Border-style values: none, dotted, dashed, solid, double, groove, ridge, inset, and outset.
Color
color: red;
or color: #FF0000; (same as above)
or color: rgb(255,0,0); (same as above)
Shorthand (each character is repeated)
color: #FF0000;
becomes color: #F00;
Just as color: #66CC66;
becomes color: #6C6;
Background
background-color: #554411;
background-image: url(texture.gif);
background-repeat: repeat-y;
background-attachment: fixed;
background-position: 100% 100%;
Shorthand (color shorthand is same as above)
background: #541 url(texture.gif) repeat-y fixed 100%;