Selectors

basic selectors
div <div>
#itemid element with id "itemid"
.class elements with class "­cla­ss"
div.class <div> with class "­cla­ss"
div#itemid <div> with id "itemid"
div span <span> within <div>
div, span <span> and <div>
div + span <span> after <div>
div > span <span> with parent <div>
* all elements
a[attr] <a> with attribute "attr"
a[attr=x] <a> when "attr" is "x"
pseudo class selectors
a:active <a> when pressed
a:focus <a> when focussed
a:hover <a> when hovered
:first-child first child element
tr:nth-child(3n+1) <tr> 1, 4, 7...
tr:nth-child(odd) <tr> 1, 3, 5...
pseudo element selectors
::after insert content after element
::before insert content before element
::first-letter first letter of element
::first-line first line of element
::selection selected part of element
form pseudo class selectors
input:checked checked input
input:disabled disabled input
input:enabled enabled input
input:invalid invalid input
input:required required input
input:valid valid input

units

units
px a pixel
em percentage of parent font size
rem percentage of <html> font size
% percentage of width

text

fonts
color text color, e.g. #9c6
font-family e.g. Helvetica, Arial, sans-serif
font-size px, rem, em or %
small, smaller, large, larger
font-style italic | normal
font-weight bold | normal
100, 200, ..., 900
styling & spacing
letter-spacing extra letter spacing, e.g. 2px
line-height e.g. 1.4
text-align hor. alig: left | center | right
text-decoration none | underline
text-transform uppercase | lowercase | capitalize
white-space nowrap | pre
word-spacing extra word spacing, e.g. 2px
lists
list-style-type none | disc | square | decimal | ...
list-style-image url(...)
list-style-position inside | outside

colors & backgrounds

colors
#36f97c hex color: R=36, G=f9, B=7c
#5c9 shorthand for #55cc99
#36F97C8D hex color with transparency 8D
rgb(54,249,124) RGB notation
rgba(54,249,124,0.7) RGB notation, opacity 0.7
lightcoral mnemonic notation (don't use)
lightcoral mnemonic notation (don't use)
backgrounds & images
background-color e.g. #fff
background-image e.g. url(img/bg.png)
e.g. linear-gradient(#0000, #0003);
background-repeat no-repeat | repeat | repeat-x | repeat-y
background-size % | cover | contain
background: #fff url(img_tree.png) no-repeat right top; background-color: #fff;
background-image: url(img_tree.png);
background-repeat: no-repeat;
background-position: right top;

box model

margins, paddings, border
border-color e.g. #ccc
border-radius e.g. 3px
border-style none | solid | dashed | dotted
border-width px, rem, em or %
border: 2px solid #900; border-width: 2px;
border-style: solid;
border-color: #900;
margin: 10px
(same for padding)		 margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin: 5px 10px
(same for padding)		 margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
margin: 5px 10px 15px 20px
(same for padding)		 margin-top: 5px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;
dimensions (doesn't work on inline elements!)
box-sizing border-box | content-box
(include | exclude padding and border)
height px, rem, em or %
max-width px, rem, em or %
min-width px, rem, em or %
width px, rem, em or %
other
box-shadow e.g. 10px 10px 5px #888;
(left, top, blur, color)

other

transitions
transition-property all | css property
transition-duration number of seconds
transition: background 0.3s; transition-property: background;
transition-duration: 0.3s;
miscellaneous
cursor auto | pointer | help | not-allowed
calc() e.g. width: calc((100% - 250px) / 3)
var() 
:root {
  --primary-color: #655;
  --secondary-color: #855;
}
a {
  color: var(--secondary-color);
}
@media() 
@media (min-width: 600px) {
  .mobile-only {
    display: none;
  }
}

layout

appearance
display none | block | inline | inline-block
opacity e.g. 0.7 (70% opaque)
visibility hidden | visible
overflow
(same for overflow-x, overflow-y)		 hidden | visible | scroll | auto
positioning (position element based on coordinates)
position absolute | relative | fixed
top
right
bottom
left
 px, rem, em or %
float / clear (float / prevent content around element)
float none | left | right
clear none | left | right | both
flexbox
display: flex create flex container
flex-direction row | row-reverse | column | column-reverse
flex-wrap wrap | nowrap
justify-content flex-start | flex-end | center | space-between
(positioning items along flex direction)
align-items flex-start | flex-end | center
(positioning items across flex direction)
flex-flow: row nowrap flex-direction: row;
flex-wrap: nowrap;
grid
display: grid create grid container
grid-template-columns e.g. 150px minmax(150px,650px) auto
grid-template-rows e.g. 50px auto
grid-template-areas e.g. grid-template-areas: "topleft . topright"
"contentleft bottom contentright";
grid-area e.g. grid-area: contentleft;