Inline

<tag style="prop: value; prop: value;"></tag>

Internal

<style>
  .selector {
    prop: value;
  }
</style>

External

Html file

<link rel="stylesheet" href="path/to/file.css" >

Css file

.selector {
  prop: value;
}

tag { }

.class { }

#id { }

[attribute="value"] { }

* { }

Text

• text-align: left | center | right | justify
• color: #RRGGBB | rgb(R, G, B) | rgba(R, G, B, A)
• text-transform: uppercase | uppercase | capitalize
• text-decoration: none|underline|overline|line-through

Element positioning

• display: block | inline-block | flex | inline-flex
• float: left | right | none
• position: relative | absolute | fixed
• z-index: value

Element styling

• background: #RRGGBB | url('path')
• background-repeat: center | value
• background-size: cover | contain | value

Pseudo classes

all:hover { }

input:focus { }

a:visited { }
a:focus { }

li:nth-child() { }
li:first-child { }
li:last-child { }

Pseudo elements

.selector:before {
  content: "";
}

.selector:after {
  content: url();
}

Animation

Transition

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

@keyframes

@keyframes jump {
    0%   {top: 0px;}
    25%  {top: 200px;}
    50%  {top: 100px;}
    75%  {top: 200px;}
    100% {top: 0px;}
}

@keyframes top {
    from {top: 0px;}
    to {top: 200px;}
}

.selector {
   animation: name time (number | infinite);
}

Layout

@media (min-width: value) { }
@media (max-width: value) { }

Float

Tap to open

Flex

Tap to open

CSS PREPROCESSORS

Less

Sass

Scss

Stylus

Tap to open

BEM

.block { }
.block__element { }
.block__element--modifier { }