CCS style blocks

1. positioning

• { display: }
  • none (hide from the page)
  • block (block mapping)
  • inline (line display)
  • inline-block (behaves externally as a row, and internally as a block)
  • flex
    • flex-direction
    • flex-wrap
    • justify-content
    • align-items
    • align-content
  • grid
    • grid-template-columns
    • grid-template-rows
    • fr (fraction)
    • justify-items
    • align-items
    • grid-template-areas
• { position: }
  • static
  • relative
  • absolute
  • fixed
  • sticky
  • inherit
• { float: }
  • left
  • right
• { z-index: }

---

2. block model and sizes

• { width: }
• { height: }
• { box-sizing: }
  • content-box
  • border-box
• { margin: }
  • 0 auto
  • N (all sides)
  • N N (top-bottom | left-right)
  • N N N (top | left-right | bottom)
  • N N N N (top | right | bottom | left)
• { border: }
  • -color
  • -style
    • solid
    • dotted
    • dashed
    • double
• { padding: }
  • -top
  • -right
  • -bottom
  • -left

---

3. typography (text properties)

• { font-family: }
  • serif (Times)
  • sans-serif (Arial)
  • monospace (Courier)
  • cursive (italic)
  • fantasy
• { font-size: }
• { color: }
• { letter-spacing: }
• { line-height: }
• { text-align: }
  • left
  • center
  • right
  • justify
• { font-weight: }
  • 100 (thin, hairline)
  • 400 (normal, regular, book)
  • 600 (semi bold, demi bold)
  • 800 (extra bold, ultra bold)
• { text-decoration: }
• { white-space: }
• { text-overflow: }
• { text-shadow: }

---

4. display (design)

• { overflow: }
  • visible
  • hidden
  • scroll
  • auto
  • initial
  • inherit
• { opacity: }
  • 0
  • 0.5
  • 1
• { visibility: }
  • visible
  • hidden
• { background-color: }
• { background-image: }
  • linear-gradient ()
  • radial-gradient ()
  • background-position
  • background-size
  • background-repeat
  • background-attachment
• { box-shadow: }
  • Х
  • У
  • blur
  • spread
  • color

---

5. animation

• @media:
  • mobile first
  • desktop first
• @keyframes animationName {...}
  • animation-name: animationName;
  • animation-duration
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-delay
  • animation-play-state

6. other