CSS Cheatsheet

px vs rem vs em

• px: fixed size, 1px is just 1px.
• rem: relative to the root element(i.e. the html element), use rem for font sizes
• em: relative to the current element, also depend on the parent element

Responsive Design

Add to HTML, do not specify height or width, it will be auto set by scale

<meta name="viewport" content="initial-scale=1.0" />

Add to CSS style sheet, again do not specify width

@viewport {
  zoom: 1;
  width: extend-to-zoom;
}

Set style based on screen size

@media (max-width: 768px) {
  .my-class {
    ...;
  }

  #my-id {
    ...;
  }
}

float:left div out side of parent

Problem: float:left div out side of parent

Solution: Set parent's overflow as hidden

#parent: {
  overflow: hidden;
}

CSS Pointer Cursor

li {
  cursor: pointer;
}

CSS Grayscale

img {
  -webkit-filter: grayscale(0.5) blur(10px);
}

Set grayscale to 1 to show grayscale image(no color), 0 to hide grayscale effect

Caret

CSS:

.caret {
  border-style: solid;
  border-width: 10px 10px 0px 10px;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-top-color: #ff9933;
  border-right-color: transparent;
  height: 0px;
  width: 0px;
  display: block;
}

and in HTML:

<div class="caret"></div>

css calc

minheight: 'calc(100vh - 40px)';

Select Table Rows

Select odd rows

table tr:nth-child(odd) {
  background-color: #eee;
}

Select first column

td: first-child;

Center Text

.foo {
  text-align: center;
}

Center Image

img {
  margin: auto;
  display: block;
}

Flex

A short-hand

flex: <flex-grow>, <flex-shrink>, <flex-basis>;

default:

flex: 0 1 auto;