CSS Properties Reference - HTML CSS TypeScript Tutorial

This page provides a comprehensive reference of CSS properties used throughout the ML Store project, organized by category.

Layout Properties

Display

Property	Values	Purpose	Example from Project
`display`	`block`, `inline`, `inline-block`, `flex`, `grid`, `none`	Element display type	`.header__container { display: flex; }`
`flex-direction`	`row`, `column`, `row-reverse`, `column-reverse`	Flex layout direction	Default is `row`
`justify-content`	`flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `space-evenly`	Main axis alignment	`.header__container { justify-content: space-between; }`
`align-items`	`flex-start`, `flex-end`, `center`, `stretch`, `baseline`	Cross axis alignment	`.header__container { align-items: center; }`
`flex`	`<grow> <shrink> <basis>`	Flex item sizing	`.header__search { flex: 1; }`
`gap`	`<length>`	Space between flex/grid items	`gap: var(--spacing-md);`

Grid Layout

.benefits__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
}

Property	Purpose	Example
`grid-template-columns`	Define column tracks	`repeat(3, 1fr)`
`grid-template-rows`	Define row tracks	`auto 1fr auto`
`grid-column`	Item column position	`1 / -1` (span all)
`grid-row`	Item row position	`2 / 4`
`gap`	Space between grid items	`gap: 1rem 2rem`

Positioning

Property	Values	Purpose
`position`	`static`, `relative`, `absolute`, `fixed`, `sticky`	Positioning method
`top`, `right`, `bottom`, `left`	`<length>`, `<percentage>`	Position offset
`z-index`	`<integer>`	Stacking order

Position Examples from Project

/* Sticky header */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Absolute cart badge */
.header__nav-link--cart::after {
  position: absolute;
  top: -4px;
  right: -8px;
}

Box Model

Spacing

Property	Purpose	Shorthand
`margin`	Outer spacing	`margin: top right bottom left`
`padding`	Inner spacing	`padding: top right bottom left`
`width`	Element width	`width: 100%`
`height`	Element height	`height: auto`
`max-width`	Maximum width	`max-width: 1200px`
`min-height`	Minimum height	`min-height: 100vh`

Shorthand patterns:

margin: 10px - All sides
margin: 10px 20px - Vertical | Horizontal
margin: 10px 20px 30px - Top | Horizontal | Bottom
margin: 10px 20px 30px 40px - Top | Right | Bottom | Left (clockwise)

Border

.product-card {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--border-radius-md);
}

Property	Values	Example
`border`	`<width> <style> <color>`	`1px solid #ccc`
`border-width`	`<length>`	`2px`
`border-style`	`solid`, `dashed`, `dotted`, `none`	`solid`
`border-color`	`<color>`	`#333`
`border-radius`	`<length>`, `<percentage>`	`8px`, `50%`

Box Sizing

*, *::before, *::after {
  box-sizing: border-box;
}

Value	Behavior
`content-box`	Width = content only
`border-box`	Width = content + padding + border

Typography

Font Properties

Property	Purpose	Example
`font-family`	Font stack	`var(--font-family-base)`
`font-size`	Text size	`var(--font-size-lg)`
`font-weight`	Text weight	`400`, `600`, `700`, `bold`
`line-height`	Line spacing	`1.5`
`letter-spacing`	Character spacing	`0.5px`
`text-align`	Horizontal alignment	`left`, `center`, `right`
`text-transform`	Case transformation	`uppercase`, `lowercase`, `capitalize`
`text-decoration`	Text decoration	`none`, `underline`

Typography Example

.product-card__category {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-gray-500);
}

Text Overflow

.product-card__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Colors and Backgrounds

Color Properties

Property	Purpose	Example
`color`	Text color	`color: var(--color-gray-600)`
`background-color`	Background color	`background-color: var(--color-white)`
`background`	Background shorthand	`background: linear-gradient(...)`
`opacity`	Transparency	`opacity: 0.6`

Gradients

.hero {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-dark) 50%,
    #FFD700 100%
  );
}

Use linear-gradient() for linear gradients and radial-gradient() for radial patterns.

Visual Effects

Shadows

.product-card {
  box-shadow: var(--shadow-sm);
}

.product-card:hover {
  box-shadow: var(--shadow-lg);
}

Property	Syntax	Example
`box-shadow`	`offset-x offset-y blur spread color`	`0 4px 6px rgba(0,0,0,0.1)`
`text-shadow`	`offset-x offset-y blur color`	`1px 1px 2px rgba(0,0,0,0.3)`

Overflow

Property	Values	Purpose
`overflow`	`visible`, `hidden`, `scroll`, `auto`	Content overflow behavior
`overflow-x`	Same as above	Horizontal overflow
`overflow-y`	Same as above	Vertical overflow

Transitions and Animations

Transitions

.header__logo-link {
  transition: transform var(--transition-fast);
}

.header__logo-link:hover {
  transform: scale(1.02);
}

Property	Values	Purpose
`transition`	`property duration timing-function delay`	Shorthand
`transition-property`	`all`, `transform`, `opacity`, etc.	What to animate
`transition-duration`	`<time>`	How long (e.g., `300ms`)
`transition-timing-function`	`ease`, `linear`, `ease-in`, `ease-out`	Animation curve
`transition-delay`	`<time>`	Delay before start

Transforms

.product-card:hover {
  transform: translateY(-8px);
}

.product-card:hover .product-card__image {
  transform: scale(1.05);
}

Function	Purpose	Example
`translate(x, y)`	Move element	`translateY(-10px)`
`scale(x, y)`	Resize element	`scale(1.1)`
`rotate(angle)`	Rotate element	`rotate(45deg)`
`skew(x, y)`	Skew element	`skewX(10deg)`

Keyframe Animations

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.products__spinner {
  animation: spin 1s linear infinite;
}

Property	Values	Purpose
`animation`	`name duration timing-function iteration-count`	Shorthand
`animation-name`	`<keyframe-name>`	Which @keyframes to use
`animation-duration`	`<time>`	Duration of animation
`animation-iteration-count`	`<number>`, `infinite`	How many times
`animation-timing-function`	`ease`, `linear`, etc.	Animation curve

CSS Variables (Custom Properties)

Defining Variables

:root {
  --color-primary: #FFE600;
  --spacing-md: 1rem;
  --border-radius-sm: 4px;
}

Using Variables

.button {
  background-color: var(--color-primary);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-sm);
}

Responsive Design

Media Queries

/* Mobile first approach */
.container {
  padding: 1rem;
}

/* Tablet and up */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    padding: 3rem;
  }
}

Viewport Units

Unit	Meaning	Example
`vw`	1% of viewport width	`width: 50vw`
`vh`	1% of viewport height	`min-height: 100vh`
`vmin`	1% of smaller dimension	`font-size: 5vmin`
`vmax`	1% of larger dimension	`width: 80vmax`

Pseudo-Classes

Selector	Triggers When	Example
`:hover`	Mouse over element	`.button:hover { }`
`:focus`	Element has focus	`input:focus { }`
`:active`	Element being clicked	`.button:active { }`
`:first-child`	First child of parent	`li:first-child { }`
`:last-child`	Last child of parent	`li:last-child { }`
`:nth-child(n)`	Nth child	`tr:nth-child(odd) { }`
`:not(selector)`	Not matching selector	`.item:not(.active) { }`

Pseudo-Elements

.header__nav-link--cart::after {
  content: attr(data-cart-count);
  position: absolute;
  /* ... */
}

Selector	Purpose	Example
`::before`	Insert before content	`.icon::before { content: "→"; }`
`::after`	Insert after content	`.badge::after { content: "New"; }`
`::first-letter`	First letter styling	`p::first-letter { font-size: 2em; }`
`::first-line`	First line styling	`p::first-line { font-weight: bold; }`
`::placeholder`	Input placeholder	`input::placeholder { color: #999; }`

Advanced Selectors

Selector	Meaning	Example
`.a .b`	Descendant	`.header .logo` (any level)
`.a > .b`	Direct child	`.list > .item`
`.a + .b`	Adjacent sibling	`h2 + p` (immediately after)
`.a ~ .b`	General sibling	`h2 ~ p` (any after)
`[attribute]`	Has attribute	`[data-active]`
`[attr="value"]`	Exact match	`[type="text"]`
`[attr^="value"]`	Starts with	`[href^="https"]`
`[attr$="value"]`	Ends with	`[src$=".png"]`
`[attr*="value"]`	Contains	`[class*="btn"]`

Common Patterns from Project

Centering Container

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

Flexbox Centering

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

Responsive Grid

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

Smooth Transition

.element {
  transition: all 0.3s ease;
}
.element:hover {
  transform: scale(1.05);
}

Next Steps

CSS Fundamentals

Learn CSS concepts in depth

TypeScript Types

TypeScript reference guide

Common Patterns

Code patterns and best practices

Quick Reference

​Layout Properties

​Display

​Grid Layout

​Positioning

​Box Model

​Spacing

​Border

​Box Sizing

​Typography

​Font Properties

​Text Overflow

​Colors and Backgrounds

​Color Properties

​Gradients

​Visual Effects

​Shadows

​Overflow

​Transitions and Animations

​Transitions

​Transforms

​Keyframe Animations

​CSS Variables (Custom Properties)

​Defining Variables

​Using Variables

​Responsive Design

​Media Queries

​Viewport Units

​Pseudo-Classes

​Pseudo-Elements

​Advanced Selectors

​Common Patterns from Project

Centering Container

Flexbox Centering

Responsive Grid

Smooth Transition

​Next Steps

CSS Fundamentals

TypeScript Types

Common Patterns

Build docs developers (and LLMs) love

Layout Properties

Display

Grid Layout

Positioning

Box Model

Spacing

Border

Box Sizing

Typography

Font Properties

Text Overflow

Colors and Backgrounds

Color Properties

Gradients

Visual Effects

Shadows

Overflow

Transitions and Animations

Transitions

Transforms

Keyframe Animations

CSS Variables (Custom Properties)

Defining Variables

Using Variables

Responsive Design

Media Queries

Viewport Units

Pseudo-Classes

Pseudo-Elements

Advanced Selectors

Common Patterns from Project

Next Steps