CSS Properties and Values


1. Layout Properties

  • display: block, inline, inline-block, flex, grid, inline-flex, inline-grid, none, table, etc.
  • position: static, relative, absolute, fixed, sticky
  • top, right, bottom, left: Length (px, %, em, etc.), auto
  • z-index: Integer (0, 1, -1, etc.), auto
  • float: left, right, none, inline-start, inline-end
  • clear: none, left, right, both, inline-start, inline-end
  • overflow: visible, hidden, scroll, auto, clip

2. Box Model

  • margin, padding: Length (px, %, em, etc.), auto
  • border-width: thin, medium, thick, Length
  • border-style: none, solid, dashed, dotted, double, groove, ridge, inset, outset, hidden
  • border-color: Color value (red, #000, rgba(0,0,0,0.5), etc.)
  • border-radius: Length, %
  • box-shadow: none, h-offset v-offset blur-radius spread-radius color, inset
  • width, height: Length, %, auto, max-content, min-content, fit-content
  • max-width, max-height, min-width, min-height: Same as width and height

3. Background

  • background-color: Color value
  • background-image: url(), none, linear-gradient(), radial-gradient(), repeating-linear-gradient()
  • background-position: Keywords (left, right, top, center, etc.), Lengths (px, %)
  • background-size: auto, cover, contain, Length, %
  • background-repeat: repeat, repeat-x, repeat-y, no-repeat, space, round
  • background-attachment: scroll, fixed, local
  • background-clip: border-box, padding-box, content-box, text
  • background-origin: padding-box, border-box, content-box

4. Text and Typography

  • color: Color value
  • font-family: Font name(s), e.g., "Arial", "Times New Roman", serif
  • font-size: Length (px, %, em, rem, vw, vh), Keywords (small, medium, large, etc.)
  • font-style: normal, italic, oblique
  • font-variant: normal, small-caps
  • font-weight: normal, bold, lighter, bolder, Numbers (100 to 900)
  • letter-spacing: normal, Length
  • line-height: normal, Number, Length, %
  • text-align: left, right, center, justify, start, end
  • text-decoration: none, underline, overline, line-through, blink, color, style (dotted, dashed, etc.)
  • text-transform: none, capitalize, uppercase, lowercase
  • white-space: normal, nowrap, pre, pre-wrap, pre-line
  • word-spacing: normal, Length

5. Flexbox

  • flex-direction: row, row-reverse, column, column-reverse
  • flex-wrap: nowrap, wrap, wrap-reverse
  • justify-content: flex-start, flex-end, center, space-between, space-around, space-evenly
  • align-items: flex-start, flex-end, center, stretch, baseline
  • align-content: flex-start, flex-end, center, space-between, space-around, stretch
  • order: Integer
  • flex-grow: Number
  • flex-shrink: Number
  • flex-basis: Length, %, auto

6. Grid

  • grid-template-columns, grid-template-rows: none, Length, %, auto, repeat(), minmax(), auto-fit, auto-fill
  • grid-column, grid-row: start / end or span value
  • gap, row-gap, column-gap: Length, %
  • justify-items, align-items: start, end, center, stretch
  • justify-content, align-content: Same as Flexbox

7. Transitions and Animations

  • transition: property duration timing-function delay
  • transition-property: none, all, Specific property
  • transition-duration: Time (s, ms)
  • transition-timing-function: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier()
  • animation: name duration timing-function delay iteration-count direction fill-mode
  • animation-name: Name of the animation
  • animation-duration: Time

8. Miscellaneous

  • cursor: auto, pointer, text, wait, move, grab, not-allowed, custom-url
  • visibility: visible, hidden, collapse
  • opacity: 0 to 1
  • clip-path: Shape (circle(), ellipse(), polygon(), etc.)




Advertisement