CSS Properties List [DEPRECATED]

[Knight Yoshi]

Visitors

Since Sept 25th, 2012

! DEPRECATED !
July 28th, 2016

This thread is nearly 4yrs old. That is simply amazing! Who would have guessed that my little thread would have stuck around for so long to help people. It started back in 2012 and was designed help to the users navigate how to use each property. It did well, this little thread of mine stood fast and has seen more than 13,000 views.

However, all good things must come to an end. So the time has come for this thread to fade into obscurity, it has run its course and then some. So it's time to say goodbye and let this thread rest.

The content of the thread will remain the same indefinitely, the content will not be removed and it will not be updated.

Goodbye my little thread, goodbye.

=============================================
CSS stands for Cascading Style Sheets. CSS is used to create all sorts of profile themes and this thread is a quick reference guide to CSS.

You can use various tools for real-time editing:
Theme Builder from Gaia Tools,
Style Editor that is built into Firefox,
Browser extensions for Firefox, Chrome, and other browsers.

The easiest is the Theme Builder on Gaia Tools, it works across multiple browsers.

Table of Contents~

1. Intro post
2. Legend Key, Definitions, and More
   Go to post - Has important information
3. Background and Color
   Go to post
4. Borders
   Go to post
5. Height & Width
   Go to post
6. Font & Text
   Go to post
7. Margin & Padding
   Go to post
8. Positioning
   Go to post
9. Pseudo classes
   Go to post
10. User-Interface
    Go to post
11. Transform
    Go to post
12. Transition
    Go to post

[Knight Yoshi]

This post needs to be renovated pretty badly, so it's content has been removed.

[Knight Yoshi]

Status: Completed(?)

Classic Profile Selectors
html

body#extendedProfileBody.bbcode-swap-blocked-group.js

div#gaia_header

ul#header_left, ul#header_right

li.spacer
li

a

img

li

a.possible_favorite.favorites_add avatar

span

div#site

div#header

h1

div#content

div#sidebar

div#profile.section

h2
ul#bar

li#onlineButton, li#offlineButton
li#addButton, li#msgButton, li#tradeButton, li#ignoreButton

a

img.avatar
div.caption

div.message

ul#equipped_id.items

li

a

img.item

div#details.section

h2
dl#stats

dt
dd

dl#info

dt
dd

a

div#wishlist.section

h2
ul.items

li

a#a_[NUM]

img.item.questing, img.item.wanted, img.item.bought, img.item.donated


div#main

div#about.section

h2
ul.links

li

a

div#friends.section

h2
ul.links

li

a

p

strong

ul#friendGroup

li

p

span
a
a

img

div.forum_userstatus

div.statuslinks

div#a_[UID].pushBox
span.offline, span.online

div#journal.section

h2
ul.links

li

a
h3
p
br
ul#entries

li

a

span.journal-date

div#multimedia.section

h2
object

embed

div#comments.section

h2
div.links

div

ul.alert_container

li#qa_addcomment

a
p

strong

dl

dt.avatar, dt.avatar2

a

img

dd.caption, dd.caption2

div.message

p.date

a

p

a

div.postcontent
ul.admin -- owner only

li, li

a

img
end admin list

div#signature.section

h2

ul#avatar_dropbox

div#trigger

ul#avatar_menu

[Knight Yoshi]

Status: Completed(?)

Current Profile Selectors
html

body#viewer.bbcode-swap-blocked-group.js

div#gaia_header

ul#header_left, ul#header_right

li.spacer
li

a

img

div#panel-details

div.hd

h2

div.bd
div.ft


div#columns

div#column_1.column.focus_column, div#column_2column.focus_column, div#column_3.column.focus_column

div#id_details.details_panel.panel

h2#details_title.[UID]
p

img

div.forum_userstatus

div.statuslinks

div#a_[UID].pushBox
span.online, span.offline


p

strong, a



div#id_equipment.equipped_list_panel.panel

h2#equipment_title
div.item

a#_[NUM].item_info

img



div#id_wishlist.wish_list_panel.panel

h2#wishlist_title
div.item

a#_[NUM].item_info

img



div#id_forum.forums_panel.panel

h2#forum_title
p (x2)

strong

p

a



div#id_contact.contact_panel.panel

h2#contact_title
ul

li (x3)

span / a - span for profile owner, a for everyone else



div#id_journal.journal_panel.panel

h2#journal_title
p

a

h3
p
ul#entries

li

a

span.journal-date



div#id_friends.friends_panel.panel

h2#friends_title
div

span#friend_friends_banner

a



p

a

p
ul.style1 / ul.style2

li

p

span

a



div.dropBox

img.avatarImage



div#id_about.about_panel.panel

h2#about_title

div#id_custom_[NUM].custom_panel.panel

h2#custom_[NUM]_title
div#custom_[NUM]_content


div#id_interests.interests_panel.panel

h2#interests_title
h3, h3, h3, h3
ul.interest_tags

li

a



div#id_comments.comments_panel.panel

h2#comments_title
div

span#alert_container

a

span#alerts_banner

a


p

a

dl.style1 / dl.style2 -- .style2 if minimal

dt

span.username

a

span.data

a




dd

p.deletecomment - owner only

a
br
a

div.dropbBox - omitted if minimal

img.avatarImage

div.postcontent - omitted if minimal, plain text



div#id_mycar.mycar_panel.panel

h2#mycar_title
object
div

a.header-launcher
br, br



div#id_house.house_panel.panel

h2#house_title
object

object

div

a.header-launcher
br, br



div#id_aquarium.aquarium_panel.panel


h2#aquarium_title
object

object



div#id_media_[NUM].media_panel.panel

h2#media_[NUM]_title
object

object



div#id_store.store_panel.postcontent.panel

h2#store_title
h3
div
p
p

a



div#id_gifts.gifts_panel.panel

h2#gifts_title
p.total
ul

li

img#gift[NUM]



p

span.from
span.username



div#id_guilds.guilds_panel.panel

h2#guilds_title
ul

li

a



div#id_badges.panel

h2#badges_title
ul#badges

li

img.badge_[NUM].clickable



a#badge_display



div#id_footprints.panel

h2#footprints_title
div.item

a



div#id_signature.signature_panel.panel

h2#signature_title
p

//column1/2/3

//columns

div#pictures_container

div#picture_[NUM].picture_decoration.decoration.resizable

img#picture_[NUM]_content

div#avatar_[NUM].picture_decoration.decoration.resizable

a

img#avatar_[NUM]_content

div#avatar_[NUM]_r.handle

div#texts_container

div#text_[NUM].text_decoration.decoration

p#text_[NUM]_content

div#footer
//body
//html

[Knight Yoshi]

Background and Color

background Color
Description: This property sets the background color of an element, either a <color> value or the keyword 'transparent'.
Value: hex | rgb| rgba | color | transparent
Initial: transparent
Usage: selector { background-color: value; }
Applies to: all elements
Examples:

h2 { background-color: red; }

is equivalent to

h2 { background-color: #FF0000}

and

h2 { background-color: rgb(255, 0, 0) }

While the following uses the same color as the previous example, the RGB. However, it reduces the opaqueness to 70%; RGBA is a CSS3 color value.

h2 { background-color: rgba(255, 0, 0, .7) }

background Image
Description: This property sets the background image of an element.
Value: uri | gradient | none
Initial: none
Usage: selector { background-image: url(image_source); }
Applies to: all elements
Note: Image URI's that have spaces must be accompanied with single quotes ', before and after the URI inside the parentheses.
Examples:

body{ background-image: url('marble.png') }

body { background-image: none }

body { background-image -moz-linear-gradient(to bottom, #FFF, #000) } /* Firefox gradient */

background-attachment
Value: scroll | fixed | inherit
Initial: scroll
Usage: selector { background-attachment: value; }
Applies to: all elements
Examples:

This example creates an infinite vertical band that remains "glued" to the viewport when the element is scrolled.

body {
background: red url('pendant.png')
background-repeat: repeat-y;
background-attachment: fixed;
}

background-position
Description: If a background image has been specified, this property specifies it's position.
Value: <length> | <percentage> | left | center | right
Initial: 0 0
Usage: selector {background-position: <x-value> <y-value>?;}
Applies to: all elements
Note: If only one value is specified, the second value is assumed to be 'center'. If at least one value is not a keyword, then the first value represents the horizontal position and the second represents the vertical position. Negative <percentage> and <length> values are allowed.
Examples:

body { background: url("banner.jpeg") right top } /* 100% 0% */
body { background: url("banner.jpeg") top center } /* 50% 0% */
body { background: url("banner.jpeg") center } /* 50% 50% */
body { background: url("banner.jpeg") bottom } /* 50% 100% */

body { background: url("banner.jpeg") 50px 10px}

body { background: url("banner.jpeg") 25% -100px}

background-repeat
Description: If a background image is specified, this property specifies whether the image is repeated (tiled), and how.
Value: repeat | repeat-x | repeat-y | no-repeat | inherit
Initial: repeat
Usage: selector { background-repeat: value; }
Applies to: all elements
Examples:

body {
background: white url('pendant.png')
background-repeat: repeat-y;
background-position: center;
}

background
Description: The 'background' property is a shorthand property for setting the individual background properties
Value: [<'background-color'> <'background-image'> <'background-repeat'> <'background-attachment'> <'background-position'>] || inherit
Initial: see individual properties
Usage: selector { background: [<'background-color'>] [<'background-image'> <'background-repeat'> <'background-attachment'> <'background-position'> ]?; }
Applies to: all elements
Examples:

In the first rule of the following example, only a value for 'background-color' has been given and the other individual properties are set to their initial value. In the second rule, all individual properties have been specified.

body { background: red }
p { background: url("chess.png") gray 50% repeat fixed }

background-clip - CSS3
Description: Determines whether the background extents into the border area or not. If the value is 'padding', the background is clipped to the padding edge and the background of the border is transparent.
Value: border-box | padding-box | content-box
Initial: border
Usage: selector { background-clip: value; }
Applies to: block-level and replaced elements
Examples:

h2 {
border: 5px navy;
border-style: dotted double;
background: #F8D575;
/* The yellow background will not go behind the border */
background-clip: padding-box;
}

h2 {
border: 5px navy;
border-style: dotted double;
background: #F8D575;
/* The yellow background will not go behind the padding*/
background-clip: content-box;
padding: 15px;
}

background-origin - CSS3
Description: Determines how the 'background-position' is calculated.
Value: padding-box | border-box | content-box
Initial: padding
Usage: selector { background-origin: value; }
Applies to: block-level and replaced elements
Note: With a value of 'padding', the position is relative to the padding edge ('0 0' is the upper left corner of the padding edge, 100% 100% is the lower right corner). 'Border' means the position is relative to the border edge, and 'content' means relative to the content edge.
Examples:

h2 {
border: 10px double;
padding: 10px;
background: url('image.jpg')
background-position: center left;
/* The background will be inside the padding */
background-origin: content-box;
}

background-size - CSS3
KEYWORDS: background, background size, background image size, background sizing
Description: In case there is a 'background-image', the background-size can be used to stretch or shrink it.
Value: <length> | <percentage> | auto
Initial: auto
Usage: selector { background-size: value; }
Applies to: all elements
Examples:

div {
background-image: url(plasma.png)
background-size: 100%;
background-origin: content}

The second example stretches the image so that exactly two copies fit horizontally. The aspect ratio is preserved:

p {
background-image: url(tubes.png)
background-size: 50% auto;
background-origin: border}

This example forces the background image to be 15 by 15 pixels:

h2 {
background-size: 15px;
background-image: url(tile.png)}

This example uses the image's intrinsic size. Note that this is the only possible behavior in CSS level 1 and 2.

body {
background-size: auto;
background-image: url(flower.png)}

color
Description: This property describes the foreground color of an element's text content.
Value: rgb | hex | color | transparent
Initial: depends on user agent
Usage: selector { color: value; }
Applies to: all elements
Examples:

h2 { color: red } /* predefined color name */
h2 { color: rgb(255,0,0) } /* RGB range 0-255 */

opacity - CSS3
Description: Controls the opaqueness (transparency) of elements.
Value: zero (0) to one (1) (e.g. .1, .2, etc)
Initial: 1
Usage: selector { opacity: value; }
Applies to: all elements
Examples:

h2 { opacity: 1 }

gradient - CSS3
Description: Gradients and a property value for the <background-image> propertyu.
Type: linear-gradient | radial-gradient | repeating-linear-gradient | repeating-radial-gradient
Direction: angel | [ top | bottom ] || [ left | right ]
Color: name | hex | rgb | rgba
Usage: selector { background-image: type-gradient( to <'direction'>?, <color1>, <color2> ); }
Prefix Usage: selector { background-image: -prefix-type-gradient( <'direction'>?, <color1>, <color2> ); }
Note: This can be used with the single background property and multiple backgrounds.
Linear Gradient Examples:

Below are various ways of specifying a basic vertical gradient:

linear-gradient(yellow, blue)
linear-gradient(to bottom, yellow, blue)
linear-gradient(to top, blue, yellow)
linear-gradient(-90deg, yellow, blue)
linear-gradient(270deg, yellow, blue)
linear-gradient(to bottom, yellow 0%, blue 100%)

Image Result

This gradient goes from the upper-left to the lower-right corner.

linear-gradient(to bottom left, yellow, blue)

Image Result

This demonstrates the use of an angle in the gradient. Compare this image with the previous example. In both gradients, the top-left of the box is pure yellow, and the bottom-right of the box is pure blue. The difference is in the angle that the gradient follows.

linear-gradient(-45deg, yellow, blue)
linear-gradient(315deg, yellow, blue)

Image Result

This demonstrates a 3-color gradient, and how to specify the location of a stop explicitly:

linear-gradient(yellow, blue 20%, #0f0)

Image Result

Radial Gradient Examples:

These examples demonstrate the basic syntax for radial gradients:

radial-gradient(yellow, green)
radial-gradient(center, ellipse cover, yellow 0%, green 100%)
radial-gradient(50% 50%, farthest-corner, yellow, green)

Image Result

radial-gradient(circle, yellow, green)

Image Result

radial-gradient(red, yellow, green)

Image Result

This image shows a gradient originating from somewhere other than the center of the box:

radial-gradient(bottom left, farthest-side, red, yellow 50px, green)

Image Result

Here we illustrate a ‘contain’ gradient.

radial-gradient(20px 30px, contain, red, yellow, green)
radial-gradient(20px 30px, 20px 30px, red, yellow, green)

Image Result

radial-gradient(20px 30px, circle contain, red, yellow, green)
radial-gradient(20px 30px, 20px 20px, red, yellow, green)

Image Result

Repeating Gradient Examples:

Repeating gradient syntax is basically identical to that of non-repeating gradients:

repeating-linear-gradient(red, blue 20px, red 40px)

Image Result

repeating-radial-gradient(red, blue 20px, red 40px)

Image Result

repeating-radial-gradient(20px 30px, circle contain, red, yellow, green 100%, yellow 150%, red 200%)

Image Result

background-image layering - CSS3
Description: Comma separated lists for layering background images from front to back; i.e. first image is front, last image/gradient is back.
Usage: selector {
background: [<'background-image'> <'background-repeat'> <'background-attachment'> <'background-position'> ], [<'background-image'> <'background-repeat'> <'background-attachment'> <'background-position'> ]?, <'gradient'>?;
}
Note:
• You can use the background shorthand property for this as well.
• A value of ‘none’ still creates a layer.
• The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on. The background color, if present, is painted below all of the other layers.
• Each of the images is sized, positioned, and tiled according to the corresponding value in the other background properties. The lists are matched up from the first value: excess values at the end are not used.
Examples:

For example, this set of declarations:

background-image: url(flower.png), url(ball.png), url(grass.png)
background-position: center center, 20% 80%, top left, bottom right;
background-origin: border-box, content-box;
background-repeat: no-repeat;

has exactly the same effect as this set with the extra position dropped and the missing values for ‘background-origin’ and ‘background-repeat’ filled in (emphasized for clarity):

background-image: url(flower.png), url(ball.png), url(grass1.png)
background-position: center center, 20% 80%, top left;
background-origin: border-box, content-box, border-box;
background-repeat: no-repeat, no-repeat, no-repeat;

Shorthand:

background: url(flower.png) left top no-repeat fixed,
url(ball.png) left center repeat-y fixed,
url(grass1.png) left bottom no-repeat fixed;

[Knight Yoshi]

Borders

border-color
Description: This property sets the foreground color of the border specified by the border-style properties.
Value: name | hex | rgb | rgba | transparent
Initial: currentColor
Usage: selector {border-color: value;}
Applies to: all elements
Note: ‘Border-color’ is a shorthand for the four ‘border-*-color’ properties. The four values set the border-top-color , border-right-color, border-bottom-color, border-left-color border, respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top.
Examples:

In this example, the border will be a solid black line.

h2 {
color: black;
background: white;
border-style: solid;
border-width: 5px;
}

In this example, the border will be a solid red line.

h2 {
background: white;
border-color: red;
border-style: solid
border-width: 5px;
}

border-style
Description: This property sets the style of the border, unless there is a border image, when present.
Value: none | dotted | dashed | solid | double | groove | ridge | inset | outset
Initial: none
Usage: selector {border-style: value;}
Applies to: all elements
Note: ‘Border-style’ is a shorthand for the other four. Its four values set the border-top-style, border-right-style, border-bottom-style, border-left-style border respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top.
Examples:

h2 {
border-color: red;
border-width: 2px;
border-style: solid dotted; }

In the above example, the horizontal borders will be 'solid' and the vertical borders will be 'dotted'.

border-width
Description: This property sets the thickness of the border when present.
Value: <length> | thin | medium | thick
Initial: medium
Usage: selector {border-width: value;}
Applies to: all elements
Note: ‘Border-width’ is a shorthand that sets the four ‘border-*-width’ properties. If it has four values, they set border-top-width, border-right-width, border-bottom-width, border-left-width in that order. If left is missing, it is the same as right; if bottom is missing, it is the same as top; if right is missing, it is the same as top.
Examples:

In the examples below, the comments indicate the resulting widths of the top, right, bottom, and left borders:

h1 { border-width: thin } /* thin thin thin thin */
h1 { border-width: thin thick } /* thin thick thin thick */
h1 { border-width: thin thick medium } /* thin thick medium thick */
}

border
Description:: The 'border' property is a shorthand property for setting the same width, color, and style for all four borders of a box.
Value: border-width | border-style | color
Initial: See individual properties
Usage: selector {border: <'border-width'> <'border-style'> <'border-color'>;}
Applies to: all elements
Note: Unlike the shorthand 'margin' and 'padding' properties, the 'border' property cannot set different values on the four borders. To do so, one or more of the other border properties must be used.
Examples:

For example, the first rule below is equivalent to the set of four rules shown after it:

h2 { border: 5px solid red }
h2 {
border-top: 5px solid red;
border-right: 5px solid red;
border-bottom: 5px solid red;
border-left: 5px solid red;
}

The following example will set all four borders to 5px wide and red, while the top border is solid, left & right is dotted and the bottom is dashed:

h2 {
border: 5px red;
border-style: solid dotted dashed;
}

border-image-source - CSS3
Description: Specifies an image to use instead of the border styles given by the ‘border-style’ properties and as an additional background layer for the element.
Value: none | image
Initial: none
Usage: selector { border-image: url('source');}
Applies to: All elements, except internal table elements when ‘border-collapse’ is ‘collapse’
Note: If the value is ‘none’ or if the image cannot be displayed, the border styles will be used.

border-image-slice - CSS3
Description: This property specifies inward offsets from the top, right, bottom, and left edges of the image, dividing it into nine regions: four corners, four edges and a middle.
Value: <number> | <percentage> && fill?
Initial: 100%
Usage: selector { border-image-slice: value ;}
Applies to: All elements, except internal table elements when ‘border-collapse’ is ‘collapse’

Note: The middle image part is discarded (treated as fully transparent) unless the ‘fill’ keyword is present. (It is drawn over the background; see Drawing the Border Image.)
When four values are specified, they set the offsets on the top, right, bottom and left sides in that order. If the left is missing, it is the same as the right; if the bottom is missing, it is the same as the top; if the right is missing, it is the same as the top.

border-image-width - CSS3
Description: The border image is drawn inside an area called the border image area. This is an area whose boundaries by default correspond to the border box, see ‘border-image-outset’.
Value: <length> | <percentage> | <number> | auto
Initial: 1
Usage: selector { border-image-width: value;}
Applies to: All elements, except table elements when ‘border-collapse’ is ‘collapse’
Note: The four values of ‘border-image-width’ specify offsets that are used to divide the border image area into nine parts. They represent inward distances from the the top, right, bottom, and left sides of the area, respectively. If the left width is missing, it is the same as the right; if the bottom is missing, it is the same as the top; if the right is missing, it is the same as the top.

border-image-outset - CSS3
Description: The values specify the amount by which the border image area extends beyond the border box.
Value: <length> | <number>
Initial: 0
Usage: selector { border-image-outset: value;}
Applies to: All elements, except internal table elements when ‘border-collapse’ is ‘collapse’
Note: If it has four values, they set the outsets on the top, right, bottom and left sides in that order. If the left is missing, it is the same as the right; if the bottom is missing, it is the same as the top; if the right is missing, it is the same as the top.
Portions of the border-image that are rendered outside the border box do not trigger scrolling. Also such portions are invisible to mouse events and do not capture such events on behalf of the element.

border-image-repeat - CSS3
Description: This property specifies how the images for the sides and the middle part of the border image are scaled and tiled.
Value: stretch | repeat | round | space
Initial: stretch
Usage: selector { border-image-repeat: value;}
Applies to: All elements, except internal table elements when ‘border-collapse’ is ‘collapse’
Note: The first keyword applies to the horizontal sides, the second to the vertical ones. If the second keyword is absent, it is assumed to be the same as the first.

border-image - CSS3
Description: This is a shorthand property for setting ‘border-image-source’, ‘border-image-slice’, ‘border-image-width’, ‘border-image-outset’ and ‘border-image-repeat’.
Value: ‘border-image-source’ || ‘border-image-slice’ [ / ‘border-image-width’? [ / ‘border-image-outset’ ]? ]? || ‘border-image-repeat’
Initial: See individual properties
Usage: selector { border-image: <'border-image-source'> <'border-image-slice'> <'border-image-width'> <'border-image-outset'> <'border-image-repeat'>;}
Applies to: See individual properties
Note: Omitted values are set to their initial values.
Examples:

This example creates a top and bottom border consisting of a whole number of orange diamonds and a left and right border of a single, stretched diamond. The corners are diamonds of a different color. The image to tile is as follows. Apart from the diamonds, it is transparent:

.panel {
border: double orange 1em;
border-image: url("border.png") 27 round stretch;
}

The result, when applied to a panel of 12 by 5em, will be similar to this:

border-radius
Description: The ‘border-radius’ property is for rounding corners. The ‘border-radius’ shorthand sets all four ‘border-*-radius’ properties.
Value: <length> | <percentage> [ <length> | <percentage> ]
Initial: 0
Usage: selector {border-radius: value;}
Applies to: all elements
Note: The four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.
Examples:

The two values of ‘border-top-left-radius: 55pt 25pt’ define the curvature of the corner.

This example draws ovals of 15em wide and 10em high:

.panel {
width: 13em;
height: 8em;
border: solid black 1em;
border-radius: 7.5em 5em }

border-radius: 4em;

is equivalent to

border-top-left-radius: 4em;
border-top-right-radius: 4em;
border-bottom-right-radius: 4em;
border-bottom-left-radius: 4em;

and

border-radius: 2em 1em 4em / 0.5em 3em;

is equivalent to

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

box-shadow
Description: The ‘box-shadow’ property attaches one or more drop-shadows to the box.
Value: none | shadow [ , shadow ]*
Initial: none
Usage: selector {box-shadow: <x-offset> <y-offset> [<blur> <spread> <inset> <color>]?;}
Applies to: all elements
Note: The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional ‘inset’ keyword. Omitted lengths are 0; omitted colors are a UA-chosen color.
The components of each <shadow> are interpreted as follows:

• The first length is the horizontal offset of the shadow. A positive value draws a shadow that is offset to the right of the box, a negative length to the left.
  
  
• The second length is the vertical offset. A positive value offsets the shadow down, a negative one up.
  
  
• The third length is a blur radius. Negative values are not allowed. If the blur value is zero, the shadow's edge is sharp. Otherwise, the larger the value, the more the shadow's edge is blurred. See below.
  
  
• The fourth length is a spread distance. Positive values cause the shadow shape to expand in all directions by the specified radius. Negative values cause the shadow shape to contract. See below. Note that for inner shadows, expanding the shadow (creating more shadow area) means contracting the shadow's perimeter shape.
  
  
• The color is the color of the shadow. If the color is absent, the used color is taken from the ‘color’ property.
  
  
• The ‘inset’ keyword, if present, changes the drop shadow from an outer shadow (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an inner shadow (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it).

Examples:

.panel {
box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4), 12px 12px 0px 8px inset rgba(0,0,0,0.4)
}

[Knight Yoshi]

Height and Width

height, width
Description: These properties specify the width and height of the content area, padding area or border area (depending on ‘box-sizing’) of certain boxes.
Value: <length> | <percentage> | auto
Initial: auto
Usage: selector { height: value; width: value; }
Applies to: all elements but non-replaced inline elements, table columns, and column groups
Examples:

For example, the following rule fixes the content width of heading level-2 at 100 pixels:

h2 { width: 100px }

For example, the following rule sets the content height of heading level-2 to 100 pixels:

h2 { height: 100px }

min-width, min-height, max-width, max-height
Description: These properties allow authors to constrain content widths and heights to a certain range.
Value: <length> | <percentage> | none
Initial: none
Usage: selector { min-height: value; min-width: value; max-height: value; max-width: value; }
Applies to: all elements but non-replaced inline elements, table rows, and row groups
Examples:

Minimum header height

h2 { min-height: 300px }

Minimum header width

h2 { min-width: 300px }

Maximum image height

img { max-height: 100px }

Maximum image width

img { max-width: 100px }

[Knight Yoshi]

Font

font-style
Description: The 'font-style' property selects between normal ( sometimes referred to as "roman" or "upright" ), italic and oblique faces within a font family.
Value: normal | italic | oblique | inherit
Initial: normal
Usage: selector {font-style: value;}
Applies to: all elements
Examples:

Headers rendered italicised, with small-caps on the first line:

h2 { font-style: italic; }

font-variant
Description: Type of variation within a font family is the small-caps. In a small-caps font the lower case letters look similar to the uppercase ones, but in a smaller size and with slightly different proportions.
Value: normal | small-caps | inherit
Initial: normal
Usage: selector {font-variant:value;}
Applies to: all elements
Examples:

h2 { font-variant: small-caps; }

font-weight
Description: The 'font-weight' property selects the weight of the font.
Value: normal | bold | bolder | lighter | inherit
Initial: normal
Usage: selector { font-weight: value; }
Applies to: all elements
Examples:

h2 {font-weight: bold;

This will set the text to bold

font-size
Description: The font size corresponds to the em square, a concept used in typography.
Value: <absolute-size> | <relative-size> | <length> | <percentage> | inherit
Initial: medium
Usage: selector {font-size: value;}
Applies to: all elements
absolute-size values: xx-small | x-small | small | medium | large | x-large | xx-large
<relative-size>
A <relative-size> keyword is interpreted relative to the table of font sizes and the font size of the parent element. Possible values are: [ larger | smaller ]. For example, if the parent element has a font size of 'medium', a value of 'larger' will make the font size of the current element be 'large'.
Examples:

h2 { font-size: 16px; }
h2 { font-size: 12pt; }
h2 { font-size: larger }
h2 { font-size: 150% }
h2 { font-size: 1.5em }

line-height
Description: On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element.
Value: normal | <number> | <length> | <percentage> | inherit
Initial: normal
Usage: selector {line-height: value;}
Applies to: all elements
Examples:

The three rules in the example below have the same resultant line height:

h2 { line-height: 1.2; font-size: 10pt } /* number */
h2 { line-height: 1.2em; font-size: 10pt } /* length */
h2 { line-height: 120%; font-size: 10pt } /* percentage */

When an element contains text that is rendered in more than one font, user agents may determine the 'normal' 'line-height' value according to the largest font size.

font-family
Description: This property specifies a prioritized list of font family names or generic family names.
Value: [[ <family-name> | <generic-family> ] [, <family-name> | <generic-family>] ] | inherit
Initial: depends on user agent
Usage: selector { font-family: value; }
Applies to: all elements
<family-name>
The name of a font family of choice such as Helvetica or Verdana in the previous example.
<generic-family>
The following generic family keywords are defined: ‘serif’, ‘sans-serif’, ‘cursive’, ‘fantasy’, and ‘monospace’. These keywords can be used as a general fallback mechanism when an author's desired font choices are not available. As keywords, they must not be quoted.
Examples:

body {
font-family: Helvetica, Verdana, sans-serif;
}

If Helvetica is available it will be used when rendering. If neither Helvetica nor Verdana is present, then the user-agent-defined sans serif font will be used.

font
Description: The 'font' property is a shorthand property for setting 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height' and 'font-family'.
Value: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ] <'font-size'> [ / <'line-height'> ] <'font-family'> ] | inherit
Initial: see individual properties
Usage: selector { font: [<'font-style'> <'font-variant'> <'font-weight'>]? <'font-size' [ /line-height]? <'font-family'>; }
Applies to: all elements
Examples:

button { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif }
button p { font: menu }
button p em { font-weight: bolder }

If the font used for dropdown menus on a particular system happened to be, for example, 9-point Charcoal, with a weight of 600, then P elements that were descendants of BUTTON would be displayed as if this rule were in effect:

button p { font: 600 9pt Charcoal }

Because the ‘font’ shorthand resets to its initial value any property not explicitly given a value, this has the same effect as this declaration:

button p {
font-style: normal;
font-variant: normal;
font-weight: 600;
font-size: 9pt;
line-height: normal;
font-family: Charcoal
}

Text

direction
Description: The direction property specifies the base writing direction of blocks.
Values: ltr | rtl | inherit
Initial: ltr
Usage: selector {direction: value;}
Applies to: All elements

letter-spacing
Description: This property specifies spacing behavior between text characters.
Value: normal | <length> | inherit
Initial: normal
Usage: selector {letter-spacing: value;}
Applies to: all elements
Examples:

The following CSS would add the equivalent of a space between each character in a level-2 heading:

h2 {
letter-spacing: 1em;
}

the rendered result will look something like:

M u s e u m

text-align
Description: This property describes how inline-level content of a block container is aligned.
Value: left | right | center | justify | start | end | match-parent | inherit
Initial: a nameless value that acts as 'left' if 'direction' is 'ltr', 'right' if 'direction' is 'rtl'
Usage: selector {text-align: value;}
Applies to: block containers
Value definitions:

‘left’
The inline contents are aligned to the left edge of the line box. (In vertical writing modes, ‘left’ aligns to the edge of the line box that would be the start edge for left-to-right text.)

‘right’
The inline contents are aligned to the right edge of the line box. (In vertical writing modes, ‘right’ aligns to the edge of the line box that would be the end edge for left-to-right text.)

‘center’
The inline contents are centered within the line box.

‘justify’
The text is justified according to the method specified by the ‘text-justify’ property.

CSS3 align values

‘start’
The inline contents are aligned to the start edge of the line box.

‘end’
The inline contents are aligned to the end edge of the line box.
'start & end'
Specifies ‘start’ alignment of the first line and any line immediately after a forced line break; and ‘end’ alignment of any remaining lines not affected by ‘text-align-last’. ‘text-align-last’ - not covered

‘<string>’ - not yet implemented
The string must be a single character; otherwise the declaration must be ignored. When applied to a table cell, specifies the alignment character around which the cell's contents will align. See below for further details and how this value combines with keywords.

‘match-parent’
This value behaves the same as ‘inherit’ except that an inherited ‘start’ or ‘end’ keyword is calculated against its parent's ‘direction’ value and results in a computed value of either ‘left’ or ‘right’.

Examples:

h2 { text-align: left }

h2 { text-align: center}

h2 { text-align: right}

text-decoration
Description: This property describes decorations that are added to the text of an element using the element's color.
Value: none | [ underline || overline || line-through ] | inherit
Initial: none
Usage: selector {text-decoration: value;}
Applies to: all elements
Examples:

a { text-decoration: underline;}

text-indent
Description: This property specifies the indentation of the first line of text in a block container.
Value: <length> | <percentage> | inherit
Initial: 0
Usage: selector {text-indent: value;}
Applies to: block containers
Examples:

h2 { text-indent: 3em }

text-transform
Description: This property controls capitalization effects of an element's text.
Value: capitalize | uppercase | lowercase | none | inherit
Initial: none
Usage: selector {text-transform: value;}
Applies to: all elements
Examples:

h2 { text-transform: uppercase }

vertical-align
Description: This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.
Value: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Initial: baseline
Usage: selector {vertical-align: value;}
Applies to: inline-level and 'table-cell' elements
Examples:

img {
display: inline;
vertical-align: top;}

white-space
Description: This property declares how white space inside the element is handled.
Value: normal | pre | nowrap | pre-wrap | pre-line | inherit
Initial: normal
Usage: selector {white-space: value;}
Applies to: all elements
word-spacing
Description: This property specifies spacing behavior between words.
Value: normal | <length> | inherit
Initial: normal
Usage: selector {word-spacing: value;}
Applies to: all elements
Examples:

h2 { word-spacing: 3em }

CSS3
text-shadow
Description: This property accepts a comma-separated list of shadow effects to be applied to the text of the element. Values are interpreted as for ‘box-shadow’. The shadow is applied to all of the element's text as well as any text decorations it specifies.
Value: none | <length> [<length>] [blur] <color>?
Initial: none
Usage: selector {text-shadow: <x-length> [<y-length>] [<blur>] <color>;}
Applies to: all elements
Note: This property accepts a comma-separated list of shadow effects to be applied to the text of the element.
The shadow effects are applied front-to-back: the first shadow is on top.
Examples:

.panel {text-shadow: 1px 1px blue}

The following example outlines text by applying four shadows:

h2 {
text-shadow: -1px 0 blue, 0 1px blue, 1px 0 blue, 0 -1px blue;
}

[Knight Yoshi]

Margin

margin-top, margin-bottom, margin-right, margin-left
Description: Margin properties specify the width of the margin area of a box. The 'margin' shorthand property sets the margin for all four sides while the other margin properties only set their respective side.
Value: length | percentage | auto | inherit
Initial: 0
Usage: selector {margin-direction: value;}
Applies to: all elements except elements with table display types other than table-caption, table and inline-table

margin
Description: The 'margin' property is a shorthand property for setting 'margin-top', 'margin-right', 'margin-bottom', and 'margin-left'
Value: <margin-top> [ <margin-right> [<margin-bottom> <margin-left>] ]
Initial: see individual properties
Usage: selector {margin: 5px 10px 15px;}
Applies to: all elements except elements with table display types other than table-caption, table and inline-table
Examples:

body { margin: 2em } /* all margins set to 2em */
body { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */
body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

The last rule of the example above is equivalent to the example below:

body {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* copied from opposite side (right) */
}

Padding

padding-top, padding-bottom, padding-right, padding-left
Description: padding properties specify the width of the padding area of a box. The 'padding' shorthand property sets the padding for all four sides while the other padding properties only set their respective side.
Value: length | percentage | auto | inherit
Initial: 0
Usage: selector {padding-direction: value;}
Applies to: all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column

padding
Description: The 'padding' property is a shorthand property for setting 'padding-top', 'padding-right', 'padding-bottom', and 'padding-left'.
Value: <padding-top> [ <padding-right> [<padding-bottom> <padding-left>] ]
Initial: see individual properties
Usage: selector {padding: 5px 10px 15px;}
Applies to: all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Examples:

body { padding: 2em } /* all padding set to 2em */
body { padding: 1em 2em } /* top & bottom = 1em, right & left = 2em */
body { padding: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

The last rule of the example above is equivalent to the example below:

body {
padding-top: 1em;
padding-right: 2em;
padding-bottom: 3em;
padding-left: 2em; /* copied from opposite side (right) */
}

[Knight Yoshi]

Positioning Properties

display
Description: This property, in combination with ‘float’ and ‘position’, determines the type of box or boxes that are generated for an element.
Value: inline | block | inline-block | list-item | run-in | compact | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | <template>| none
Initial: inline
Usage: selector {display: value;}
Applies to: all elements
Examples:

img { display: block }

img { display: inline }

li { display: list-item }

img { display: none } /* Do not display images */

float
Description: This property specifies whether a box should float to the left, right, or not at all.
Value: left | right | none
Initial: none
Usage: selector {float: value;}
Applies to: all, but see position absolute
Examples:

img {
float: left;
width: 100px;
height: 100px;
border: 2px solid blue;
}

clear
Description: This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box.
Value: none | left | right | both | inherit
Initial: none
Usage: selector {clear: value;}
Applies to: block-level elements
Note: The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.
Examples:

p { clear: left }

formatting might look like this:

Both paragraphs have set 'clear: left', which causes the second paragraph to be "pushed down" to a position below the float — "clearance" is added above its top margin to accomplish this.

'overflow', 'overflow-x', 'overflow-y'
Description: These properties specify whether content is clipped and scrolled when it overflows the element's content area.
Value: visible | hidden | scroll | auto
Initial: visible
Usage: selector {overflow: value;}
Applies to: non-replaced block-level elements and non-replaced ‘inline-block’ elements

position
Description: The 'position' and 'float' properties determine which of the CSS 2.1 positioning algorithms is used to calculate the position of a box.
Value: static | relative | absolute | fixed | inherit
Initial: static
Usage: selector {position: value; }
Applies to: all elements
Value definitions:

static
The box is a normal box, laid out according to the normal flow. The 'top', 'right', 'bottom', and 'left' properties do not apply.
relative
The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
absolute
The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.
fixed
The box's position is calculated according to the 'absolute' model, but in addition, the box is fixed with respect to some reference. As with the 'absolute' model, the box's margins do not collapse with any other margins. In the case of handheld, projection, screen, tty, and tv media types, the box is fixed with respect to the viewport and does not move when scrolled.

Exampes:

h2 {position: absolute;}

'top', 'right', 'bottom', 'left'
Description: An element is said to be positioned if its 'position' property has a value other than 'static'. Positioned elements generate positioned boxes, laid out according to four properties
Value: length | percentage | auto | inherit
Initial: auto
Usage: section {top: value; right: value; bottom: value; left: value;}
Applies to: positioned elements. See property above.
Examples:

h2 {
position: relative;
top: 100px;
left: 50px;
}

h2 {
position: absolute;
bottom: 0;
right: 0;
}

visibility
Description: The 'visibility' property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the 'display' property to 'none' to suppress box generation altogether).
Value: visible | hidden | inherit
Initial: visible
Usage: section {visibility: value;}
Applies to: all elements

z-index
Description: For a positioned box, the 'z-index' property specifies the stack level of the box in the current stacking context
Value: auto | integer | inherit
Initial: auto
Usage: section {z-index: value;}
Applies to: positioned elements
Examples:

h2 {
z-index: -1;}

h2 {
z-index: 0;}

h2 {
z-index: 1;}

h2 {
z-index: 1000;}

There is no cap limit to how high or low the z-index can be set.

[Knight Yoshi]

Pseudos

selector:pseudo { declaration block }

Link specific pseudo classes
a:link -- Matches links not yet visited
a:visited -- Matches links already visited

Action pseudo classes
selector:active -- Tells what to do when a target is clicked
selector:hover -- Tells what to do when a target is hovered

Pseudo Elements
selector:before -- Insert content before any element
selector:after -- Insert content after any element
See the content property under User-interface. Pseudo elements can be styled with any property; heights, widths, background, borders, etc.

Negation Pseudo Class CSS3
selector:not(selector) /* Matches all elements except what is defined in the parentheses. May only contain one selector rule per-not() */

Structural Pseudo Classes CSS3
selector:nth-child(N) Matches elements on the basis of their positions within a parent element’s list of child elements
selector:nth-last-child(N) Matches last elements on the basis of their positions within a parent element’s list of child elements
selector:nth-of-type(N) matches elements on the basis of their positions within a parent element’s list of child elements of the same type
selector:nth-last-of-type(N) Matches last elements on the basis of their positions within a parent element’s list of child elements of the same type

Nth Pseudo Examples (Current profile)

Recommended to use nth-of-type
#id_details p:nth-last-child(1) /* represents the last p element */
#id_details p:nth-last-of-type(n+4) /* represents the 4th p element from the last and all p elements before it */

#id_details p:nth-of-type(3) /* represents the third p element */
#id_details p:nth-of-type(1n) /* represents all the p elements */

#id_details p:nth-of-type(even) /* represents the even p elements */
#id_details p:nth-of-type(odd) /* represents the odd p elements. */

[Knight Yoshi]

User-Interface

content
Value: normal | none | [ string | uri> | counter | attr( <identifier> ) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
Initial: normal
Usage: selector:before { content: value; }
Applies to: :before and :after pseudo-elements
Value definitions:

none
The pseudo-element is not generated.
Example:

content: none;

normal
Computes to 'none' for the :before and :after pseudo-elements.
Example:

content: normal;

<string>
Text content (see the section on strings).
Example:

h2:after {
content: 'injected string of text';
}

<uri>
The value is a URI that designates an external resource (such as an image). If the user agent cannot display the resource it must either leave it out as if it were not specified or display some indication that the resource cannot be displayed.
Example:

h2:after {
content: url(image-url)
}

<counter>
Counters may be specified with two different functions: 'counter()' or 'counters()'. The former has two forms: 'counter(name)' or 'counter(name, style)'. The generated text is the value of the innermost counter of the given name in scope at this pseudo-element; it is formatted in the indicated style ('decimal' by default). The latter function also has two forms: 'counters(name, string)' or 'counters(name, string, style)'. The generated text is the value of all counters with the given name in scope at this pseudo-element, from outermost to innermost separated by the specified string. The counters are rendered in the indicated style ('decimal' by default). See the section on automatic counters and numbering for more information. The name must not be 'none', 'inherit' or 'initial'. Such a name causes the declaration to be ignored.
-- This one's a bit more complex to give an example, and not likely to be used. So I'm omitting the example for it.

open-quote and close-quote
These values are replaced by the appropriate string from the 'quotes' property.
Example:

h2:before {
content: open-quote;
}

h2:after {
content: close-quote;
}

no-open-quote and no-close-quote
Introduces no content, but increments (decrements) the level of nesting for quotes.

attr(X)
This function returns as a string the value of attribute X for the subject of the selector. The string is not parsed by the CSS processor. If the subject of the selector does not have an attribute X, an empty string is returned. The case-sensitivity of attribute names depends on the document language.
Example:

h2:after {
content: attr(id)
display: block;
}

Other Example:

In this example it combines string values with the attr(X) values

h2:after {
content: 'ID tag: ' attr(id) ' and class tag:' attr(class)
display: block;
}

The result would be for an h2 element with the ID of header_2 and a class of bar:

ID tag: header_2 and class tag: bar

You can also style the pseudo element as you would any other element on the page. Borders, font changes, backgrounds, heights, widths, positions, etc.
&!-- End value definitions !&--

cursor
Value: [<uri> ,] auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress | inherit
Initial: auto
Usage: selector { content: value; }
Applies to: all elements
Example:

body {
cursor: pointer;
}

body {
cursor: url(image-url), default;
}

A cursor fall back must be used if using an image for a cursor

CSS3
box-sizing
Description: The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements.
Value: content-box | padding-box | border-box | inherit
Initial: content-box
Usage: selector { content: value; }
Applies to: all elements that accept width or height
Examples:

h2 {
box-sizing: border-box;
border: 1px solid red;
height: 30px;
padding: 10px;
width: 300px;
}

resize
Description: The ‘resize’ property allows the author to specify whether or not an element is resizable by the user, and if so, along which axis/axes.
Value: none | both | horizontal | vertical | inherit
Initial: none
Usage: selector { content: value; }
Applies to: elements with ‘overflow’ other than visible

[Knight Yoshi]

Transform

transform
Value: none | transform-function [ transform-function ]*
Initial: none
Usage: selector {-prefix-transform: transform-function(value);}
Applies to: block-level and atomic inline-level elements
Note: Currently there is no official standard. You must browser prefixes. But I fully support this property.

The Transformation Functions
translate( <translation-value>[, <translation-value>] )
specifies a 2D translation by the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. If <ty> is not provided, ty has zero as a value.
translateX( <translation-value> )
specifies a translation by the given amount in the X direction.
translateY( <translation-value> )
specifies a translation by the given amount in the Y direction.

scale( <number>[, <number>] )
specifies a 2D scale operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it is takes a value equal to the first. For example, scale(1, 1) would leave an element unchanged, while scale(2, 2) would cause it to appear twice as long in both the X and Y axes, or four times its typical geometric size.
scaleX( <number> )
specifies a scale operation using the [sx,1] scaling vector, where sx is given as the parameter.
scaleY( <number> )
specifies a scale operation using the [1,sy] scaling vector, where sy is given as the parameter.

rotate( <angle> )
specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin property. For example, rotate(90deg) would cause elements to appear rotated one-quarter of a turn in the clockwise direction.

MDN Note: The skew() function was present in early drafts. It has been removed and is still present in some implementations. Do not use it..skewX( <angle> )
specifies a skew transformation along the X axis by the given angle.
skewY( <angle> )
specifies a skew transformation along the Y axis by the given angle.

[Knight Yoshi]

Transitions

transition-property
Value: none | all | [ property ] [ ‘,’ property ]*
Initial: all
Usage: selector {-prefix-transition-property: property;}
Applies to: all elements, :before and :after pseudo elements

transition-duration
Description: This property specifies how long the transition from the old value to the new value should take.
Value: time [, <time>]*
Initial: 0
Usage: selector {-prefix-transition-duration: time;}
Applies to: all elements, :before and :after pseudo elements

transition-timing-function
Description: The timing function takes as its input the current elapsed percentage of the transition duration and outputs a percentage that determines how close the transition is to its goal state.
Value: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier( <number>, <number>, <number>, <number> ) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier( <number>, <number>, <number>, <number> )]*
Initial: ease
Usage: selector {-prefix-transition-timing-function: time;}
Applies to: all elements, :before and :after pseudo elements
cubic-bezier
Specifies a cubic-bezier curve. The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2). All values must be in the range [0, 1] or the definition is invalid.

transition-delay
Description: The ‘transition-delay’ property defines when the transition will start. It allows a transition to begin execution some some period of time from when it is applied. A ‘transition-delay’ value of ‘0’ means the transition will execute as soon as the property is changed. Otherwise, the value specifies an offset from the moment the property is changed, and the transition will delay execution by that offset.
Value: time [, time]*
Initial: 0
Usage: selector {-prefix-transition-delay: time;}
Applies to: all elements, :before and :after pseudo elements

transition
Description: The ‘transition’ shorthand property combines the four properties ‘transition-property’, ‘transition-duration’, ‘transition-timing-function’, ‘transition-delay’ described above into a single property.
Value: [ ‘transition-property’ | ‘transition-duration’ | ‘transition-timing-function’ | ‘transition-delay’ [, [ ‘transition-property’ | ‘transition-duration’ | ‘transition-timing-function’ | ‘transition-delay’ ] ]
Initial: see individual properties
Usage: selector {-prefix-transition: <property> <duration> <timing-function> <delay>;}
Applies to: all elements, :before and :after pseudo elements
Note: Currently there is no official standard. You must use browser prefixes. But I fully support this property.

[Knight Yoshi]

Reserved