Box Model Properties

Definition: Controls the space outside the element's border.

Values: length (px, em), %, auto

Usage: margin: 20px; or margin: 10px 15px 5px 0;

Definition: Controls the space between the content and the element's border.

Values: length (px, em), %

Usage: padding: 15px; or padding: 10px 5px;

Text and Font Properties

Defines the typeface used. Values: Arial, 'Times New Roman', sans-serif

Sets italic or normal text. Values: normal, italic, oblique

Enables small caps. Values: normal, small-caps

Defines line spacing. Values: normal, number, length, percentage

Adjusts space between letters. Values: normal, length

Adjusts space between words. Values: normal, length

Horizontal alignment. Values: left, right, center, justify

Decorates text. Values: none, underline, overline, line-through

Text casing. Values: none, capitalize, uppercase, lowercase

Box and Border Properties

Shorthand for border width, style, color

Rounds corners. Values: length or percentage

Shadow behind box. Format: h-offset v-offset blur spread color

Box model choice. Values: content-box, border-box

Layout Properties

Floats element. Values: left, right, none

Prevents float wrapping. Values: left, right, both

Stacking order. Values: integer

Handles overflow. Values: visible, hidden, scroll, auto

Element visibility. Values: visible, hidden, collapse

Flexbox Properties

Direction of items. Values: row, row-reverse, column, column-reverse

Wraps items. Values: nowrap, wrap, wrap-reverse

Aligns multi-line flexbox content. Values: flex-start, flex-end, center, space-between

Shorthand for grow, shrink, basis. Example: flex: 1 1 auto

Grid Properties

Defines grid row sizes. Example: 100px auto 1fr

Item placement. Example: grid-column: 1 / span 2

Shortcut for align-items and justify-items

Animation & Effects

Shorthand for animation properties like duration, name, delay, etc.

Smooth value change. Example: transition: all 0.5s ease-in-out

Transparency. Value: 0 to 1

Media Queries

Applies styles based on screen size or conditions.

Examples:

@media screen and (max-width: 600px) {
  body { background-color: lightgray; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .container { padding: 30px; }
}
        

Reference Links

MDN Web Docs: MDN CSS Reference

W3Schools CSS: W3Schools CSS Reference

CSS Tricks Almanac: CSS-Tricks Almanac