CSS

Basics

{: .-three-column}

Selectors

.class {
  font-weight: bold;
}

{: .-setup}

Selector	Description
*	All elements
div	Element
.class	Class
#id	ID
[disabled]	Attribute
[role="dialog"]	Attribute

Combinators

Selector	Description
.parent .child	Descendant
.parent > .child	Direct descendant
.child + .sibling	Adjacent sibling
.child ~ .sibling	Far sibling
.class1.class2	Have both classes

Attribute selectors

Selector	Description
[role="dialog"]	= Exact
[class~="box"]	~= Has word
`[class	="box"]`
[href$=".doc"]	$= Ends in
[href^="/index"]	^= Begins with
[class*="-is-"]	*= Contains

Pseudo-classes

Selector	Description
:target	eg, h2#foo:target
---	---
:disabled
:focus
:active
---	---
:nth-child(3)	3rd child
:nth-child(3n+2)	2nd child in groups of 3
:nth-child(-n+4)
---	---
:nth-last-child(2)
:nth-of-type(2)
---	---
:checked	Checked inputs
:disabled	Disabled elements
:default	Default element in a group
---	---
:empty	Elements without children

Pseudo-class variations

Selector
:first-of-type
:last-of-type
:nth-of-type(2)
:only-of-type
---
:first-child
:last-child
:nth-child(2)
:only-child
{: .-left-align}

Fonts

{: .-left-reference}

Properties

Property	Description
font-family:	<font>, <fontN>
font-size:	<size>
letter-spacing:	<size>
line-height:	<number>
---	---
font-weight:	bold normal
font-style:	italic normal
text-decoration:	underline none
---	---
text-align:	left right center justify
text-transform:	capitalize uppercase lowercase
{: .-key-values}

Shorthand

{: .-prime}

	style	weight	size (required)		line-height	family
font:	italic	400	14px	/	1.5	sans-serif
	style	weight	size (required)		line-height	family (required)
{: .-css-breakdown}

Example

font-family: Arial;
font-size: 12pt;
line-height: 1.5;
letter-spacing: 0.02em;
color: #aa3322;

Case

text-transform: capitalize; /* Hello */
text-transform: uppercase; /* HELLO */
text-transform: lowercase; /* hello */

Background

{: .-left-reference}

Properties

Property	Description
background:	(Shorthand)
---	---
background-color:	<color>
background-image:	url(...)
background-position:	left/center/right top/center/bottom
background-size:	cover X Y
background-clip:	border-box padding-box content-box
background-repeat:	no-repeat repeat-x repeat-y
background-attachment:	scroll fixed local
{: .-key-values}

Shorthand

	color	image	positionX	positionY		size	repeat	attachment
background:	#ff0	url(bg.jpg)	left	top	/	100px auto	no-repeat	fixed;
background:	#abc	url(bg.png)	center	center	/	cover	repeat-x	local;
	color	image	positionX	positionY		size	repeat	attachment
{: .-css-breakdown}

Multiple backgrounds

background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
  url('background.jpg') center center / cover, #333;

Animation

{: .-left-reference}

Properties

Property	Value
animation:	(shorthand)
animation-name:	<name>
animation-duration:	<time>ms
animation-timing-function:	ease linear ease-in ease-out ease-in-out
animation-delay:	<time>ms
animation-iteration-count:	infinite <number>
animation-direction:	normal reverse alternate alternate-reverse
animation-fill-mode:	none forwards backwards both initial inherit
animation-play-state:	normal reverse alternate alternate-reverse
{: .-key-values}

Shorthand

	name	duration	timing-function	delay	count	direction	fill-mode	play-state
animation:	bounce	300ms	linear	100ms	infinite	alternate-reverse	both	reverse
	name	duration	timing-function	delay	count	direction	fill-mode	play-state
{: .-css-breakdown}

Example

animation: bounce 300ms linear 0s infinite normal;
animation: bounce 300ms linear infinite;
animation: bounce 300ms linear infinite alternate-reverse;
animation: bounce 300ms linear 2s infinite alternate-reverse forwards normal;

Event

.one('webkitAnimationEnd oanimationend msAnimationEnd animationend')