Complete CSS Reference — Properties, Selectors, Units & Best Practices

Hello my friend! Welcome to the Complete CSS Reference on dev.rean.me! This page is your one-stop reference for every important CSS property, selector, unit, and modern feature — organized clearly by category so you can find what you need in seconds!

Bookmark this page and use it every time you write CSS! Let's go!

1. 🎯 Selectors Reference

Basic Selectors

Selector	Example	Description
Universal	`*`	Selects all elements
Type / Element	`h1`	Selects all `<h1>` elements
Class	`.card`	Selects elements with `class="card"`
ID	`#navbar`	Selects element with `id="navbar"`
Attribute	`[type="text"]`	Selects elements with matching attribute

Combinator Selectors

Selector	Example	Description
Descendant	`div p`	Selects `<p>` anywhere inside `<div>`
Child	`ul > li`	Selects `<li>` that is a direct child of `<ul>`
Adjacent Sibling	`h2 + p`	Selects `<p>` immediately after `<h2>`
General Sibling	`h2 ~ p`	Selects all `<p>` siblings after `<h2>`

Attribute Selectors

Selector	Description
`[attr]`	Has this attribute
`[attr="val"]`	Attribute exactly equals value
`[attr^="val"]`	Attribute starts with value
`[attr$="val"]`	Attribute ends with value
`[attr*="val"]`	Attribute contains value anywhere
`[attr~="val"]`	Attribute contains value in space-separated list

Pseudo-Class Selectors

Pseudo-Class	Description
`:hover`	Element is being hovered by mouse
`:focus`	Element has keyboard/mouse focus
`:focus-visible`	Element has focus via keyboard (not mouse)
`:focus-within`	Element or descendant has focus
`:active`	Element is being clicked/pressed
`:visited`	Visited hyperlink
`:link`	Unvisited hyperlink
`:checked`	Checked checkbox or radio button
`:disabled`	Disabled form element
`:enabled`	Enabled form element
`:required`	Input with `required` attribute
`:optional`	Input without `required` attribute
`:valid`	Input passing validation
`:invalid`	Input failing validation
`:user-valid`	Input valid after user interaction
`:user-invalid`	Input invalid after user interaction
`:placeholder-shown`	Input currently showing placeholder text
`:empty`	Element with no children or text
`:root`	Root element — `<html>` (use for CSS variables)
`:not(selector)`	Elements that do NOT match the selector
`:is(a, b)`	Matches any selector in list (lower specificity)
`:where(a, b)`	Like `:is()` but zero specificity
`:has(selector)`	Parent selector — element containing a match
`:first-child`	First child of its parent
`:last-child`	Last child of its parent
`:nth-child(n)`	The nth child (`odd`, `even`, `2n+1`, etc.)
`:nth-last-child(n)`	nth child counting from the end
`:first-of-type`	First element of that type in its parent
`:last-of-type`	Last element of that type in its parent
`:nth-of-type(n)`	nth element of that type
`:only-child`	Element with no siblings
`:only-of-type`	Only element of that type in its parent

Pseudo-Element Selectors

Pseudo-Element	Description
`::before`	Inserts content before the element
`::after`	Inserts content after the element
`::first-line`	Styles the first line of text
`::first-letter`	Styles the first letter of text
`::placeholder`	Styles the input placeholder text
`::selection`	Styles the user's selected/highlighted text
`::marker`	Styles list item bullet or number
`::file-selector-button`	Styles file input browse button
`::backdrop`	Styles the `<dialog>` backdrop overlay

💡 Tip: Use :is() to shorten long selector lists! Instead of h1 a, h2 a, h3 a write :is(h1, h2, h3) a — cleaner and more maintainable!

2. 📦 Box Model Properties

Every HTML element is a rectangular box. The box model defines how its size is calculated.

Property	Description	Example
`width`	Element content width	`width: 300px`
`height`	Element content height	`height: 200px`
`min-width`	Minimum width	`min-width: 200px`
`max-width`	Maximum width	`max-width: 1200px`
`min-height`	Minimum height	`min-height: 100px`
`max-height`	Maximum height	`max-height: 500px`
`padding`	Inner spacing (inside the border)	`padding: 16px`
`padding-top/right/bottom/left`	Individual padding sides	`padding-top: 8px`
`margin`	Outer spacing (outside the border)	`margin: 0 auto`
`margin-top/right/bottom/left`	Individual margin sides	`margin-bottom: 24px`
`border`	Shorthand for width, style, color	`border: 1px solid #ccc`
`border-width`	Border thickness	`border-width: 2px`
`border-style`	`solid`, `dashed`, `dotted`, `double`, `none`	`border-style: dashed`
`border-color`	Border color	`border-color: red`
`border-radius`	Rounds corners	`border-radius: 8px`
`border-top/right/bottom/left`	Individual border sides	`border-top: 2px solid blue`
`box-sizing`	How width/height is calculated	`box-sizing: border-box`
`outline`	Outline outside border (no layout space)	`outline: 2px solid blue`
`outline-offset`	Gap between border and outline	`outline-offset: 4px`

💡 Tip: Always set box-sizing: border-box on all elements! This makes width and height include padding and border — preventing elements from overflowing their containers:
*, *::before, *::after { box-sizing: border-box; }

3. 🎨 Color & Background Properties

Property	Description	Example
`color`	Text color	`color: #333`
`background`	Shorthand for all background properties	`background: #f5f5f5`
`background-color`	Solid background color	`background-color: rgba(0,0,0,0.5)`
`background-image`	Background image or gradient	`background-image: url('bg.jpg')`
`background-size`	`cover`, `contain`, or exact size	`background-size: cover`
`background-position`	Image position	`background-position: center`
`background-repeat`	`repeat`, `no-repeat`, `repeat-x/y`	`background-repeat: no-repeat`
`background-attachment`	`scroll` or `fixed` (parallax)	`background-attachment: fixed`
`background-origin`	Where background starts	`background-origin: border-box`
`background-clip`	Where background is clipped	`background-clip: text`
`opacity`	Element transparency `0` (invisible) to `1` (solid)	`opacity: 0.5`

Color Value Formats:

Format	Example
Named Color	`red`, `blue`, `tomato`, `coral`
Hex	`#ff5733` or short `#f53`
RGB	`rgb(255, 87, 51)`
RGBA	`rgba(255, 87, 51, 0.8)`
HSL	`hsl(14, 100%, 60%)`
HSLA	`hsla(14, 100%, 60%, 0.8)`
`oklch`	`oklch(65% 0.2 25)` — modern perceptual color space
`currentColor`	Inherits the current `color` value
`transparent`	Fully transparent

4. 📝 Typography / Font Properties

Property	Description	Example
`font-family`	Font name with fallbacks	`font-family: 'Inter', sans-serif`
`font-size`	Text size	`font-size: 16px`
`font-weight`	`100`–`900`, `bold`, `normal`	`font-weight: 700`
`font-style`	`normal`, `italic`, `oblique`	`font-style: italic`
`font-variant`	`normal` or `small-caps`	`font-variant: small-caps`
`font`	Shorthand — style, variant, weight, size/line-height, family	`font: 700 16px/1.5 'Inter', sans-serif`
`line-height`	Space between lines of text	`line-height: 1.6`
`letter-spacing`	Space between characters	`letter-spacing: 0.05em`
`word-spacing`	Space between words	`word-spacing: 4px`
`text-align`	`left`, `right`, `center`, `justify`, `start`, `end`	`text-align: center`
`text-decoration`	`underline`, `line-through`, `overline`, `none`	`text-decoration: none`
`text-decoration-color`	Color of the text decoration line	`text-decoration-color: red`
`text-decoration-thickness`	Thickness of the decoration line	`text-decoration-thickness: 2px`
`text-underline-offset`	Gap between text and underline	`text-underline-offset: 4px`
`text-transform`	`uppercase`, `lowercase`, `capitalize`, `none`	`text-transform: uppercase`
`text-indent`	First-line indentation	`text-indent: 2em`
`text-overflow`	`clip` or `ellipsis` for overflow text	`text-overflow: ellipsis`
`text-shadow`	Shadow behind text	`text-shadow: 2px 2px 4px rgba(0,0,0,0.3)`
`white-space`	`normal`, `nowrap`, `pre`, `pre-wrap`	`white-space: nowrap`
`word-break`	`normal`, `break-all`, `keep-all`	`word-break: break-word`
`overflow-wrap`	`normal` or `break-word`	`overflow-wrap: break-word`
`vertical-align`	Inline element vertical alignment	`vertical-align: middle`
`direction`	`ltr` or `rtl` text direction	`direction: rtl`
`unicode-bidi`	Bidirectional text override	`unicode-bidi: embed`

5. 📐 Display & Layout Properties

Property	Values	Description
`display`	`block`, `inline`, `inline-block`, `flex`, `grid`, `none`, `contents`	Controls element rendering type
`visibility`	`visible`, `hidden`, `collapse`	Hide without removing space
`position`	`static`, `relative`, `absolute`, `fixed`, `sticky`	Positioning method
`top` / `right` / `bottom` / `left`	Length values	Offset from positioned ancestor
`z-index`	Integer	Stacking order (higher = on top)
`float`	`left`, `right`, `none`	Float element to left/right
`clear`	`left`, `right`, `both`, `none`	Clear floated elements
`overflow`	`visible`, `hidden`, `scroll`, `auto`	Content overflow behavior
`overflow-x`	Same as overflow	Horizontal overflow only
`overflow-y`	Same as overflow	Vertical overflow only
`clip-path`	Shape values	Clip element to a shape
`object-fit`	`fill`, `contain`, `cover`, `scale-down`, `none`	How `<img>` or `<video>` fits its box
`object-position`	Position values	Position of `<img>` within its box
`aspect-ratio`	e.g. `16/9`	Lock width-to-height ratio

6. 📏 Units Reference

Absolute Units

Unit	Description
`px`	Pixels — most common absolute unit
`pt`	Points — 1pt = 1.33px (print media)
`cm`	Centimeters
`mm`	Millimeters
`in`	Inches

Relative Units

Unit	Relative To
`em`	Parent element's `font-size`
`rem`	Root (`<html>`) element's `font-size`
`%`	Parent element's size
`vw`	1% of the viewport width
`vh`	1% of the viewport height
`vmin`	1% of the smaller of `vw` or `vh`
`vmax`	1% of the larger of `vw` or `vh`
`svh`	Small viewport height (excludes mobile browser chrome)
`dvh`	Dynamic viewport height (updates as mobile chrome shows/hides)
`ch`	Width of the `0` character in the current font
`ex`	Height of the `x` character in the current font
`fr`	Fraction unit — only used inside CSS Grid
`lh`	Current element's `line-height`
`rlh`	Root element's `line-height`

💡 Tip: Use rem for font sizes and em for spacing that should scale with its component's font size. Use px only for borders and very small values that should NOT scale!

7. 🔄 Flexbox Properties

Container Properties (`display: flex`)

Property	Values	Description
`display`	`flex` / `inline-flex`	Enable flexbox
`flex-direction`	`row`, `row-reverse`, `column`, `column-reverse`	Main axis direction
`flex-wrap`	`nowrap`, `wrap`, `wrap-reverse`	Allow items to wrap to next line
`flex-flow`	`<direction> <wrap>`	Shorthand for direction + wrap
`justify-content`	`flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `space-evenly`	Align items on main axis
`align-items`	`stretch`, `flex-start`, `flex-end`, `center`, `baseline`	Align items on cross axis
`align-content`	Same as justify-content	Align wrapped lines
`gap`	Length	Gap between flex items (row and column)
`row-gap`	Length	Gap between rows
`column-gap`	Length	Gap between columns

Item Properties

Property	Values	Description
`flex`	`<grow> <shrink> <basis>`	Shorthand for all three below
`flex-grow`	Number (default: `0`)	How much item grows relative to others
`flex-shrink`	Number (default: `1`)	How much item shrinks relative to others
`flex-basis`	Length or `auto`	Initial main-axis size before flex
`align-self`	Same as align-items	Override alignment for this item only
`order`	Integer	Visual order of items (default: `0`)

💡 Tip: flex: 1 is shorthand for flex: 1 1 0% — makes an item grow to fill all available space equally. Very useful for making columns the same width!

8. ▦ CSS Grid Properties

Container Properties (`display: grid`)

Property	Description	Example
`display`	Enable grid	`display: grid`
`grid-template-columns`	Define column track sizes	`grid-template-columns: 1fr 2fr 1fr`
`grid-template-rows`	Define row track sizes	`grid-template-rows: auto 1fr`
`grid-template-areas`	Named area layout map	see example below
`grid-template`	Shorthand for rows + columns + areas
`grid-auto-columns`	Size of implicit columns	`grid-auto-columns: 200px`
`grid-auto-rows`	Size of implicit rows	`grid-auto-rows: minmax(100px, auto)`
`grid-auto-flow`	`row`, `column`, `dense`	How auto-placed items fill the grid
`gap`	Row and column gap together	`gap: 16px`
`row-gap`	Space between rows	`row-gap: 24px`
`column-gap`	Space between columns	`column-gap: 16px`
`justify-items`	Align items horizontally in their cell	`justify-items: center`
`align-items`	Align items vertically in their cell	`align-items: stretch`
`place-items`	Shorthand for align + justify items	`place-items: center`
`justify-content`	Align the whole grid horizontally	`justify-content: center`
`align-content`	Align the whole grid vertically	`align-content: start`
`place-content`	Shorthand for align + justify content	`place-content: center`

Grid Item Properties

Property	Description	Example
`grid-column`	Span columns (`start / end`)	`grid-column: 1 / 3`
`grid-row`	Span rows (`start / end`)	`grid-row: 1 / 4`
`grid-area`	Reference a named grid area	`grid-area: header`
`justify-self`	Override horizontal alignment	`justify-self: start`
`align-self`	Override vertical alignment	`align-self: end`

Grid Template Areas Example:

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

Useful Grid Functions:

Function	Description
`repeat(3, 1fr)`	Repeat track 3 times
`minmax(200px, 1fr)`	Min 200px, max fills remaining space
`auto-fill`	Fill as many tracks as possible
`auto-fit`	Fill and collapse empty tracks
`fit-content(400px)`	Max width of 400px but shrinks to fit content

💡 Tip: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) creates a fully responsive card grid that adjusts column count automatically — no media queries needed!

9. 🎬 Transitions & Animations

Transitions

Property	Description	Example
`transition`	Shorthand for all transition properties	`transition: all 0.3s ease`
`transition-property`	Which property to animate	`transition-property: opacity, transform`
`transition-duration`	How long the transition takes	`transition-duration: 0.3s`
`transition-timing-function`	Speed curve	`transition-timing-function: ease-in-out`
`transition-delay`	Wait before starting	`transition-delay: 0.1s`

Timing Functions:

Value	Description
`ease`	Slow start, fast middle, slow end (default)
`linear`	Constant speed throughout
`ease-in`	Slow start, fast end
`ease-out`	Fast start, slow end
`ease-in-out`	Slow start and end, fast middle
`cubic-bezier(x1,y1,x2,y2)`	Custom speed curve
`steps(4, end)`	Jumps in discrete steps

Animations (`@keyframes`)

/* Define the animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply it */
.card {
  animation: fadeInUp 0.5s ease-out forwards;
}

Property	Description	Example
`animation`	Shorthand for all animation properties	`animation: slide 1s ease infinite`
`animation-name`	Name of the `@keyframes` block	`animation-name: fadeInUp`
`animation-duration`	How long one cycle takes	`animation-duration: 0.5s`
`animation-timing-function`	Speed curve (same as transition)	`animation-timing-function: ease`
`animation-delay`	Wait before first play	`animation-delay: 0.2s`
`animation-iteration-count`	`1`, `3`, or `infinite`	`animation-iteration-count: infinite`
`animation-direction`	`normal`, `reverse`, `alternate`, `alternate-reverse`	`animation-direction: alternate`
`animation-fill-mode`	`none`, `forwards`, `backwards`, `both`	`animation-fill-mode: forwards`
`animation-play-state`	`running` or `paused`	`animation-play-state: paused`

10. 🔄 Transform Properties

Function	Description	Example
`translate(x, y)`	Move element	`transform: translate(50px, 20px)`
`translateX(x)`	Move horizontally	`transform: translateX(-50%)`
`translateY(y)`	Move vertically	`transform: translateY(-50%)`
`translateZ(z)`	Move on Z-axis (3D)	`transform: translateZ(100px)`
`scale(x, y)`	Scale element	`transform: scale(1.2)`
`scaleX(x)`	Scale horizontally	`transform: scaleX(2)`
`scaleY(y)`	Scale vertically	`transform: scaleY(0.5)`
`rotate(angle)`	Rotate element	`transform: rotate(45deg)`
`rotateX(angle)`	Rotate on X-axis (3D flip)	`transform: rotateX(180deg)`
`rotateY(angle)`	Rotate on Y-axis (3D flip)	`transform: rotateY(180deg)`
`skew(x, y)`	Skew/shear element	`transform: skew(10deg, 5deg)`
`matrix(...)`	Combined 2D transformation matrix	`transform: matrix(...)`
`perspective(n)`	Set 3D perspective depth	`perspective: 1000px`

Related Properties:

Property	Description
`transform-origin`	Point the transform rotates/scales from
`transform-style: preserve-3d`	Enable 3D space for children
`backface-visibility`	Show or hide back face of 3D flip
`will-change: transform`	Hint GPU optimization for animated property

11. 📱 Media Queries & Responsive Design

/* Mobile first — apply styles for all screen sizes first */
.container { padding: 16px; }

/* Tablet — 768px and above */
@media (min-width: 768px) {
  .container { padding: 24px; }
}

/* Desktop — 1024px and above */
@media (min-width: 1024px) {
  .container { padding: 32px; }
}

/* Large desktop */
@media (min-width: 1280px) {
  .container { max-width: 1200px; margin: 0 auto; }
}

Common Media Feature Reference:

Feature	Example	Description
`min-width`	`(min-width: 768px)`	Viewport at least 768px wide
`max-width`	`(max-width: 767px)`	Viewport at most 767px wide
`min-height`	`(min-height: 600px)`	Viewport at least 600px tall
`orientation`	`(orientation: landscape)`	Device in landscape mode
`prefers-color-scheme`	`(prefers-color-scheme: dark)`	User prefers dark mode
`prefers-reduced-motion`	`(prefers-reduced-motion: reduce)`	User wants fewer animations
`hover`	`(hover: hover)`	Device supports hover (e.g., mouse)
`pointer`	`(pointer: coarse)`	Coarse pointer (touchscreen)
`display-mode`	`(display-mode: standalone)`	App is running as installed PWA
`print`	`@media print { }`	Print-specific styles

Container Queries (Modern):

.card-container { container-type: inline-size; }

@container (min-width: 400px) {
  .card { display: flex; }
}

💡 Tip: Always design mobile-first — start with styles for small screens, then add min-width media queries as screen gets larger. This is better than designing for desktop and overriding with max-width queries!

12. 🎨 CSS Custom Properties (Variables)

/* Define variables on :root for global scope */
:root {
  --color-primary: #6366f1;
  --color-bg: #ffffff;
  --color-text: #1a1a2e;
  --font-size-base: 16px;
  --radius: 8px;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  --spacing-md: 16px;
}

/* Use with var() */
.button {
  background: var(--color-primary);
  border-radius: var(--radius);
  padding: var(--spacing-md);
  font-size: var(--font-size-base);
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f0f1a;
    --color-text: #e5e5f0;
  }
}

/* Fallback value */
color: var(--color-brand, #6366f1);

💡 Tip: CSS variables are reactive — changing a variable on :root instantly updates every element using it. Perfect for building consistent design systems and dark mode themes!

13. 💡 Useful CSS Functions

Function	Description	Example
`var()`	Reference a CSS custom property	`color: var(--primary)`
`calc()`	Mathematical calculation	`width: calc(100% - 48px)`
`clamp(min, val, max)`	Value clamped between min and max	`font-size: clamp(1rem, 2.5vw, 2rem)`
`min(a, b)`	Picks the smallest value	`width: min(90%, 600px)`
`max(a, b)`	Picks the largest value	`padding: max(16px, 4vw)`
`rgb()` / `rgba()`	Define color with red, green, blue	`color: rgb(100, 200, 100)`
`hsl()` / `hsla()`	Define color with hue, saturation, lightness	`color: hsl(200, 80%, 50%)`
`oklch()`	Perceptual color model (modern)	`color: oklch(65% 0.2 250)`
`linear-gradient()`	Linear color gradient	`background: linear-gradient(to right, #f00, #00f)`
`radial-gradient()`	Radial color gradient	`background: radial-gradient(circle, #f00, #00f)`
`conic-gradient()`	Conic (pie-chart) gradient	`background: conic-gradient(red, blue, red)`
`url()`	Reference an external file	`background-image: url('photo.jpg')`
`attr()`	Use element's attribute value in CSS	`content: attr(data-label)`
`counter()`	Display CSS counter value	`content: counter(section)`
`env()`	Access browser environment variable	`padding: env(safe-area-inset-bottom)`
`format()`	Font format hint inside `@font-face`	`format('woff2')`

14. 🎭 Pseudo & Special Properties

`::before` & `::after` Pattern

.icon-check::before {
  content: "✓";
  color: green;
  margin-right: 8px;
}

/* Clear float hack */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

`content` Property Values

Value	Description
`""`	Empty string (used for decorative elements)
`"text"`	Literal text string
`url('icon.svg')`	Insert an image
`attr(data-label)`	Use attribute value
`counter(section)`	Display counter
`open-quote` / `close-quote`	Insert quotation mark
`none`	Remove the pseudo-element

CSS Scroll & Scroll Snap

Property	Description
`scroll-behavior: smooth`	Smooth scrolling when navigating to anchors
`scroll-snap-type`	Enable snap points (`x mandatory`, `y proximity`)
`scroll-snap-align`	Snap alignment (`start`, `center`, `end`)
`scroll-padding`	Offset the snap scroll position (e.g., for fixed headers)
`overflow-anchor`	Control scroll anchoring behavior

15. ✅ CSS Best Practices Checklist

✅ Use box-sizing: border-box on everything — *, *::before, *::after
✅ Design mobile-first — base styles for small screens, min-width queries for larger
✅ Use CSS Custom Properties (--var) for colors, spacing, and radii
✅ Use rem for font sizes — scales with the user's browser font preference
✅ Prefer gap over margin for spacing inside Flex and Grid layouts
✅ Use transition on hover states for smooth, polished interactions
✅ Add prefers-reduced-motion media query to disable animations for accessibility
✅ Use aspect-ratio to maintain image ratios and prevent layout shift
✅ Use object-fit: cover on <img> inside a sized container for clean cropping
✅ Avoid deeply nested selectors — keep specificity low and predictable
✅ Use will-change: transform sparingly — only on elements you know will animate
✅ Use clamp() for fluid typography instead of multiple breakpoints
✅ Use @layer to manage CSS specificity in large projects
✅ Lint and format your CSS with Stylelint and Prettier

Hope this complete CSS reference guide helps you write better, cleaner, and more modern CSS every day! Bookmark this page and share it with your developer friends! 🎨✨