All CSS Properties Cheat Sheet with Examples

CSS (Cascading Style Sheets) is the language you use to make websites look good. While HTML builds the structure of your page, CSS controls colors, layouts, fonts, spacing, and animations. Think of HTML as the bones and CSS as the skin, clothes, and makeup. Every professional website you've ever visited uses CSS to transform boring black-and-white text into beautiful, interactive experiences. CSS works by selecting HTML elements and applying style rules to them—you can target everything from a single button to every paragraph on your entire site.

• Visual Control: CSS gives you pixel-perfect control over how every element appears, from typography to spacing to responsive layouts that work on any screen size.
• Separation of Concerns: Keeping styles separate from HTML makes your code cleaner, easier to maintain, and allows designers to work independently from developers.
• Performance: External CSS files are cached by browsers, meaning visitors only download them once, making subsequent page loads faster.
• Consistency: Define styles once and apply them across hundreds of pages—change one CSS rule and update your entire site instantly.
• Career Essential: Every front-end developer job requires CSS proficiency. It's non-negotiable for web development careers.

Layout properties control how elements are positioned and how they interact with surrounding elements. These are the foundation of responsive design.

Position: Controls positioning behavior. Values include static (default), relative (offset from normal position), absolute (positioned relative to nearest positioned ancestor), fixed (relative to viewport), and sticky (hybrid of relative and fixed).

Display: Determines how an element generates boxes. Common values are block (takes full width), inline (flows with text), inline-block (inline but accepts width/height), flex (flexbox container), grid (CSS Grid container), and none (hides element).

css
/* Flexbox layout for navigation */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: #333;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar-menu {
  display: flex;
  gap: 2rem;
  list-style: none;
}

The CSS box model describes the rectangular boxes generated for elements. Every element has content, padding, border, and margin—understanding this is crucial for spacing control.

Padding: Space between content and border. You can set all sides with padding: 20px or individually with padding-top, padding-right, padding-bottom, padding-left. Shorthand follows clockwise order: padding: 10px 20px 10px 20px (top right bottom left).

Margin: Space outside the border, separating elements. Uses same syntax as padding. Watch out for margin collapse—vertical margins between elements can merge.

Border: The line around padding. Control width (border-width), style (border-style: solid), and color (border-color). Shorthand: border: 2px solid #000.

css
/* Card component with complete box model */
.card {
  width: 300px;
  padding: 2rem;
  margin: 1rem auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  box-sizing: border-box; /* Include padding in width calculation */
}

.card-header {
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #007bff;
}

Typography properties control text appearance. Great typography makes content readable and establishes visual hierarchy.

Font-family: Specifies typefaces with fallbacks. Always end with a generic family like serif, sans-serif, or monospace.

Font-size: Text size using units like px, rem, em, or %. Use rem for accessibility (scales with user preferences).

Line-height: Vertical spacing between lines. Unitless values (like 1.5) are best—they multiply the font size.

css
/* Professional typography scale */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

h1 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.code {
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 0.9em;
  font-weight: 400;
  white-space: pre-wrap;
}

Colors and backgrounds establish mood, brand identity, and visual interest.

Color: Sets text color. Use hex (#ff6b6b), RGB (rgb(255, 107, 107)), RGBA (with alpha/transparency), or HSL (hue, saturation, lightness).

Background: Shorthand for background properties. Individual properties include background-color, background-image, background-size, background-position, and background-repeat.

css
/* Modern gradient hero section */
.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-size: cover;
  background-position: center;
  color: #ffffff;
  padding: 6rem 2rem;
}

.button-primary {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.button-primary:hover {
  background-color: #0056b3;
}

Flexbox is a one-dimensional layout system perfect for distributing items along a single axis. It revolutionized CSS layouts.

Container Properties: display: flex activates flexbox. flex-direction sets axis direction (row/column). justify-content aligns items along main axis. align-items aligns items along cross axis.

Item Properties: flex-grow determines how items expand. flex-shrink controls shrinking. flex-basis sets initial size before space distribution.

css
/* Responsive card grid with flexbox */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  align-items: stretch;
}

.card-item {
  flex: 1 1 300px; /* grow shrink basis */
  max-width: 350px;
  display: flex;
  flex-direction: column;
}

.card-footer {
  margin-top: auto; /* Push to bottom */
}

CSS Grid is a two-dimensional layout system for complex page layouts. It handles both rows and columns simultaneously.

Grid Container: display: grid activates grid. grid-template-columns and grid-template-rows define track sizes. Use fr units for flexible fractions.

Grid Items: grid-column and grid-row position items. Use span to stretch across multiple tracks.

css
/* Dashboard layout with CSS Grid */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 50px;
  grid-template-areas:
    "sidebar header"
    "sidebar main"
    "sidebar footer";
  gap: 1rem;
  min-height: 100vh;
}

.sidebar { grid-area: sidebar; }
.header { grid-area: header; }
.main { grid-area: main; }
.footer { grid-area: footer; }

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

CSS animations bring interfaces to life without JavaScript. Use them sparingly for polish, not distraction.

Transition: Smooth changes between states. Define properties, duration, timing function, and delay.

Animation: More complex sequences using keyframes. Control iteration count, direction, and play state.

css
/* Loading spinner animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

/* Smooth hover effects */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

• Forgetting box-sizing: border-box — Without this, padding and border add to element width, breaking layouts. Set it globally on *, *::before, *::after for consistent behavior.

• Using px for everything — Fixed pixel values don't scale with user preferences. Use rem for fonts and spacing to respect accessibility settings. One rem equals the root font size (usually 16px).

• Overusing !important — This brute-force approach creates specificity wars and unmaintainable code. Fix specificity properly by understanding the cascade or restructuring selectors.

• Not understanding the cascade — CSS stands for "Cascading" Style Sheets. Later rules override earlier ones, inline styles beat external styles, and specificity determines winners. Learn the hierarchy: !important > inline > ID > class > element.

• Forgetting vendor prefixes for older browsers — Properties like transform, transition, and flex needed -webkit-, -moz-, -ms- prefixes in older browsers. Use autoprefixer tools or check caniuse.com for compatibility.

• Creating unnecessary wrappers — Flexbox and Grid often eliminate the need for extra <div> containers. One parent with display: flex can replace complex nested structures with floats and clears.

💡 Think Like a Programmer: CSS isn't magic—it's a declarative language with predictable rules. Master the box model, understand specificity, and you'll debug layout issues 10x faster than guessing and refreshing.