CSS Cheatsheet

2/19/2019

As web developers, we often use pure css or css-based technologies (sass/less/css-in-js). However, often we forget some of css's more intricate rules and gotchas. Below is a comprehensive css cheatsheet that you can view every so often as a refresher:

Selectors

Selector types:

  • Element: elementName {...rules} (i.e. "p" or "ul")
  • Class: .className {...rules}
  • Id: #idName {...rules}
  • Other attributes: [attributeName="attributeValue"] {...rules}

Specificity (from most to least)

  1. !important tag
  2. Inline style
  3. Id (1,0,0)
  4. Class (0,1,0)
  5. Element (0,0,1)

Chained selectors:

  • element element - any descendent (ie .container h1)
  • element > element - any direct descendent (ie ul.coolList > li)
  • .class.class - any element with all specified classed (ie ul.coolList.highlight)
  • selector, selector - both selectors (ie .coolThing, .highlight)
  • selector + selector - adjacent following sibling
  • selector ~ selector - general following sibling

Pseudo classes

  • links:
    • a:link - targets hyperlinks that have not yet been visited
    • a:visited - targets hyperlinks that have been visited
    • a:hover - targets hyperlinks that are hovered over
    • a:active - targets hyperlinks that are clicked on
    • forms
      • :focus - targets input that has focus
      • :disabled/:enabled - targets input that has been disabled/enabled
      • :checked - targets checkbox that has been checked
      • :invalid/:valid - targets input that has an invalid/valid state
      • :required/optional - targets input that is required/optional
    • positional:
      • :first-child - first child in relation to parent (ie li:first-child)
      • :last-child - last child in relation to parent (ie li:last-child)
      • :nth-child(2) - child at index in relation to parent (ie li:nth-child(2))
      • :nth-child(2n) - all child elements at even position (ie li:nth-child(2n))
      • :nth-child(2n) - all child elements at odd position (ie li:nth-child(2n))
      • :before {content:"before"} - adds content before element
      • :after {content:"after"} - adds content after element
  • For the same specificity, the last rule in the source wins.

Applied Inheritance

  • initial sets the value to the browser's default.
  • inherit sets the value to whatever is for parent element.

The Box Model

  • All elements can be considered "boxes". The layers of the box are (from outer to inner): margin, border, padding, content
  • By default, padding, border and width/height affect the total width/height of an element
  • box-sizing attribute
    • border-box: padding and margin fall within width, so total width is always same as width
    • content-box: padding and margin fall within width, so total width is sum of all 3, (content-box is the default)

Units

  • em: based on element font-size. If font-size is 30px, 1em is 30px
  • rem: based on defaultfont-size.
  • % (for font-size): based on percentage of default font-size

Colors

  • hex,rgb and hsl

Backgrounds

  • background-size:
    • cover: scales the background image as much as possible without skewing
    • background-attachment: can change positioning of background image

Hiding/showing elements

  • opacity:0; - hidden but still takes up space
  • visibility:hidden; - hidden but still takes up space
  • display:none; - hidden and removed from layout

Positioning Elements

  • position:relative;: can move element from original position (i.e. top: 20px;
  • position:absolute;: element is taken out of the flow of the page. Elements positioned absolutely will be relative to first parent element with position:relative;
  • position:fixed always relative to the document, and maintains position while scrolling

Media Queries:

  • @media(max-width: 740px){..rules}: applies rules based on viewport constraints

display property

  • inline - lays out horizontally, width/height defined by content only, no margin/padding top/bottom (but can do margin/padding left/right)
  • inline-block - lays out horizontally, width/height can be defined, can add margin/padding top/bottom
  • block - lays out vertically (unless floated), width/height/margin/padding can be defined for all sides
  • flex - behaves as block, but applies flex layout to children
  • inline-flex - behaves as inline-block, but applies flex layout to children

Flexbox

  • Applying
    • Use display:flex
  • flex-direction
    • row - lays children out horizontally, left to right, (this is the default)
    • row-reverse - lays children out horizontally, right to left
    • column - lays children out vertically, top to bottom
    • column-reverse - lays children out bottom to top
  • order
    • Defaults to 0
    • For flex-direction:column the higher the order the lower it will appear, if order value is the same, then html position will take effect
    • For flex-direction:row the higher the order the farther right it will appear, if order value is the same, then html position will take effect
  • justify-content - aligns the content in the along flex-direction
    • flex-start - aligns the content to the start (top for flex-direction:column and left for flex-direction:row, (this is the default)
    • flex-start - aligns the content to the start (top for flex-direction:column and left for flex-direction:row, (this is the default)
    • flex-end - aligns the content to the end (bottom for flex-direction:column and right for flex-direction:row
    • center - aligns the content to the "center" (middle for flex-direction:column and center for flex-direction:row
    • space-between - aligns first element to start, last element to end and all other children spaced out evenly
    • space-around - spaces out all elements evenly
  • align-items - aligns the content in the perpendicular to flex-direction
    • center,start, end - same as in justify-content
    • stretch - expands elements to fit container
    • baseline - lines up elements to the first line of text in first element
  • align-self - can be applied to an individual child element (same values as align-items)
  • flex-basis - controls the size of an element along the flex-direction (width for flex-direction:row and height for flex-direction:column)
  • flex-grow and flex-shrink
    • controls how the element takes up extra space
    • it is relative, so for 3 elements, width flex-grow values 1, 2 and 3 respectively, element 1 will take up 1/3 space, element 2 2/3 of space and element 3 gets 3/6 of the space
    • talk about default
    • flex-grow:0 - means element won't grow beyond its flex-basis
  • flex: flex-grow flex-shrink flex-basis - this is the shorthand
  • flex-wrap
    • nowrap - elements don't wrap, even if overflowing the container
    • wrap - elements do wrap, if overflowing the container
    • wrap-reverse - elements do wrap in direction of bottom to top, if overflowing the container

Transitions

  • transition-property: which properties to animate
  • transition-duration: how long the animation lasts
  • transition-timing-function: how the intermediate states are calculated
  • transition-delay: to start the animation after a certain amount of time
  • transition: transition-property transition-duration transition-timing-function transition-delay - the shorthand