CSS 

Cascading Style Sheets provide a powerful tool to separate content from presentation. The standard is defined by the World-wide Web Consortium. There's a good tutorial over at htmldog.

Where?

CSS rules can go in
  • a style attribute in an HTML tag - known as an in-line style and often frowned upon
  • inside a style tag in your HTML, normally in the head section
  • in an external stylesheet, with a link tag from your HTML

Measurements

Many rules are used to set size or position using one of:
  • px - pixels - not recommended for setting font-sizes as will stop the user from setting their preferred scale
  • em - ems, nominally the width of the character 'm'
  • ex - an e
  • pt - points, most useful for print
  • % - a percentage of the containing element
    for fonts, a percentage of the browser default size.

CSS Reference

Rules

selector { property: value; property: value....} // optional comment

A selector can be a tag, an ID (starting'#') or a classname (starting '.'
Multiple selector can share the same rule by separating them with ',' (comma)
 th, legend, dt {font-weight:bold; color:green}

Multiple selectors separated by spaces make the rules more specific
 .menu li a:hover {color:white; background:red}
means:
link tags in the hover state are white text on a red background if they are in a list-item inside a list with classname "menu"

Background

Property Description
background Sets all the background properties in one go
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page
background-color Sets the background color of an element
background-image Sets the background image for an element
background-position Sets the starting position of a background image
background-repeat Sets how a background image will be repeated

Border

Property Description
border Sets all the border properties in one go
border-bottom Sets all the bottom border properties in one go
border-bottom-color Sets the color of the bottom border
border-bottom-style Sets the style of the bottom border
border-bottom-width Sets the width of the bottom border
border-color Sets the color of the four borders
border-left Sets all the left border properties in one go
border-left-color Sets the color of the left border
border-left-style Sets the style of the left border
border-left-width Sets the width of the left border
border-right Sets all the right border properties in one go
border-right-color Sets the color of the right border
border-right-style Sets the style of the right border
border-right-width Sets the width of the right border
border-style Sets the style of the four borders
border-top Sets all the top border properties in one go
border-top-color Sets the color of the top border
border-top-style Sets the style of the top border
border-top-width Sets the width of the top border
border-width Sets the width of the four borders
outline Sets all the outline properties in one go
outline-color Sets the color of an outline
outline-style Sets the style of an outline
outline-width Sets the width of an outline

Dimensions

Property Description
height Sets the height of an element
max-height Sets the maximum height of an element
max-width Sets the maximum width of an element
min-height Sets the minimum height of an element
min-width Sets the minimum width of an element
width Sets the width of an element

Font

Property Description
font Sets all the font properties in one go
font-family Specifies the font family for text
font-size Specifies the font size of text
font-style Specifies the font style for text
font-variant Specifies whether or not a text should be displayed in a small-caps font
font-weight Specifies the weight of a font

Generated Content

Property Description
content Used with the :before and :after pseudo-elements, to insert generated content
counter-increment Increments one or more counters
counter-reset Creates or resets one or more counters
quotes Sets the type of quotation marks for embedded quotations

Lists

Property Description
list-style Sets all the properties for a list in one go
list-style-image Specifies an image as the list-item marker
list-style-position Specifies if the list-item markers should appear inside or outside the content flow
list-style-type Specifies the type of list-item marker

Margin

Property Description
margin Sets all the margin properties in one go
margin-bottom Sets the bottom margin of an element
margin-left Sets the left margin of an element
margin-right Sets the right margin of an element
margin-top Sets the top margin of an element

Padding

Property Description
padding Sets all the padding properties in one go
padding-bottom Sets the bottom padding of an element
padding-left Sets the left padding of an element
padding-right Sets the right padding of an element
padding-top Sets the top padding of an element

Positioning

Property Description
bottom Sets the bottom margin edge for a positioned box
clear Specifies which sides of an element where other floating elements are not allowed
clip Clips an absolutely positioned element
cursor Specifies the type of cursor to be displayed
display Specifies the type of box an element should generate
float Specifies whether or not a box should float
left Sets the left margin edge for a positioned box
overflow
 Specifies what happens if content overflows an element's box
position Specifies the type of positioning for an element
right Sets the right margin edge for a positioned box
top Sets the top margin edge for a positioned box
visibility Specifies whether or not an element is visible
z-index Sets the stack order of an element

Print

Property Description
orphans Sets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element
page-break-after Sets the page-breaking behavior after an element
page-break-before Sets the page-breaking behavior before an element
page-break-inside Sets the page-breaking behavior inside an element
widows Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element

Tables

Property Description
border-collapse Specifies whether or not table borders should be collapsed
border-spacing Specifies the distance between the borders of adjacent cells
caption-side Specifies the placement of a table caption
empty-cells Specifies whether or not to display borders and background on empty cells in a table
table-layout Sets the layout algorithm to be used for a table

Text

Property Description
color Sets the color of text
direction Specifies the text direction/writing direction
letter-spacing Increases or decreases the space between characters in a text
line-height Sets the line height
text-align Specifies the horizontal alignment of text
text-decoration Specifies the decoration added to text
text-indent Specifies the indentation of the first line in a text-block
text-shadow Specifies the shadow effect added to text
text-transform Controls the capitalization of text
unicode-bidi  
vertical-align Sets the vertical alignment of an element
white-space Specifies how white-space inside an element is handled
word-spacing Increases or decreases the space between words in a text

Pseudo-classes

Property Description
:active Adds a style to an element that is activated
:after Adds content after an element
:before Adds content before an element
:first-child Adds a style to an element that is the first child of another element
:first-letter Adds a style to the first character of a text
:first-line Adds a style to the first line of a text
:focus Adds a style to an element that has keyboard input focus
:hover Adds a style to an element when you mouse over it
:lang Adds a style to an element with a specific lang attribute
:link Adds a style to an unvisited link
:visited Adds a style to a visited link