CSS Cheatsheet

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