Categories of CSS Properties


CSS has a large number of properties that can be used to style elements. While it's not feasible to list every property here in exhaustive detail, I'll provide a comprehensive list of commonly used CSS properties.

CSS Properties

1. Layout and Positioning

  • display
  • position
  • top
  • right
  • bottom
  • left
  • z-index
  • float
  • clear
  • overflow
  • visibility
  • clip
  • object-fit
  • object-position

2. Box Model

  • width
  • height
  • margin
  • padding
  • border
  • border-width
  • border-style
  • border-color
  • border-radius
  • box-shadow
  • box-sizing

3. Typography

  • font-family
  • font-size
  • font-weight
  • font-style
  • font-variant
  • line-height
  • text-align
  • text-decoration
  • text-transform
  • letter-spacing
  • word-spacing
  • text-indent
  • text-shadow
  • white-space
  • word-wrap
  • overflow-wrap
  • direction
  • writing-mode

4. Color and Background

  • color
  • background-color
  • background-image
  • background-repeat
  • background-position
  • background-size
  • background-attachment
  • background-clip
  • background-origin
  • opacity

5. Flexbox and Grid

  • display: flex
  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content
  • align-self
  • flex-grow
  • flex-shrink
  • flex-basis
  • grid-template-columns
  • grid-template-rows
  • grid-area
  • grid-column
  • grid-row
  • grid-auto-flow
  • grid-gap

6. Transforms and Animations

  • transform
  • transform-origin
  • transition
  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay
  • animation
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction

7. Pseudo-classes and Pseudo-elements

  • :hover
  • :focus
  • :active
  • :visited
  • :link
  • :first-child
  • :last-child
  • :nth-child()
  • :nth-of-type()
  • :before
  • :after
  • ::placeholder
  • ::selection

8. Lists

  • list-style
  • list-style-type
  • list-style-position
  • list-style-image

9. Tables

  • border-collapse
  • border-spacing
  • caption-side
  • empty-cells
  • table-layout
  • vertical-align

10. Miscellaneous

  • cursor
  • pointer-events
  • visibility
  • filter
  • clip-path
  • resize
  • user-select
  • contain
  • will-change