cheatsheets/css.md

title	category	layout	tags	weight
CSS	CSS	2017/sheet	WIP	-1

Basics

{: .-three-column}

Selectors

.class {
  font-weight: bold;
}

{: .-setup}

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

Combinators

Selector	Description
.parent .child	Descendant
.parent > .child	Direct descendant
.child + .sibling	Adjascent sibling
.child ~ .sibling	Far sibling

Attribute selectors

Selector	Description
[role="dialog"]	= Exact
[class~="box"]	~= Has word
`[class	="box"]`
[href$=".doc"]	$= Ends in
[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)
---	---

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}

| 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

| 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

| animation: | (shorthand) | | animation-name: | <name> | | animation-delay: | <time>ms | | animation-duration: | <time>ms | | animation-direction: | normal reverse alternate alternate-reverse | | animation-iteration-count: | infinite <number> | | animation-timing-function: | ease linear ease-in ease-out ease-in-out | {: .-key-values}

Shorthand

| animation: | bounce | 300ms | linear | 100ms | infinite | alternate-reverse | | | name | duration | timing-function | delay | count | direction | {: .-css-breakdown}

Example

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

Event

.one('webkitAnimationEnd oanimationend msAnimationEnd animationend')