EM vs REM

padding

If the padding property has four values:

• padding:10px 5px 15px 20px;
  • top padding is 10px
  • right padding is 5px
  • bottom padding is 15px
  • left padding is 20px

If the padding property has three values:

• padding:10px 5px 15px;
  • top padding is 10px
  • right and left padding are 5px
  • bottom padding is 15px

If the padding property has two values:

• padding:10px 5px;
  • top and bottom padding are 10px
  • right and left padding are 5px

If the padding property has one value:

• padding:10px;
  • all four paddings are 10px

Note: Negative values are not allowed.

border

in one line

border: 3px solid red;

for example

border-bottom: 2px solid #ccc;

element inside element

css selectors

 css-selectors-cheatsheet.pdf

media queries

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

source: stackoverflow

classes vs. ID's

 

ID's are unique

Classes are NOT unique